@fremtind/jokul 4.3.0 → 5.0.0-next.1

package/styles/{styles.css → components.css}

@@ -21,10 +21,7 @@
   }
   .jkl-autosuggest__no-hits-message {
     padding: var(--jkl-autosuggest-option-padding);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     color: var(--jkl-color-text-subdued);
   }
   .jkl-autosuggest__menu {
@@ -49,10 +46,7 @@
     padding: 0;
   }
   .jkl-autosuggest__item {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     color: unset;
     display: flex;
     align-items: center;
@@ -60,8 +54,8 @@
     background-color: var(--jkl-color-background-interactive);
     min-height: var(--jkl-autosuggest-option-height);
     text-align: left;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color, background-color;
     position: relative;
     padding: var(--jkl-autosuggest-option-padding);
@@ -92,12 +86,9 @@
     position: relative;
     display: flex;
     align-items: center;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    font: var(--jkl-text-style-text-medium);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color, box-shadow, background-color;
     background-color: var(--background-color);
     color: var(--text-color);
@@ -172,10 +163,7 @@
     background: none;
     -webkit-appearance: none;
     color: inherit;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-text-input__input {
     outline: 0;
@@ -233,43 +221,22 @@
     margin: -0.125rem 0.25rem;
   }
 }
-@layer jokul.theme {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-icon-grade: 0;
-    }
-  }
-  [data-theme=light] {
-    --jkl-icon-grade: 0;
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-icon-grade: -25;
-    }
-  }
-  [data-theme=dark] {
-    --jkl-icon-grade: -25;
-  }
-}
 @layer jokul.components {
   .jkl-icon {
     --jkl-icon-fill: 0;
     font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
-    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
+    font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
     font-feature-settings: "liga";
     -webkit-font-feature-settings: "liga";
     font-size: 1.3em;
-    font-weight: var(--jkl-icon-weight, 300);
+    font-weight: 400;
     line-height: 1;
     display: inline-block;
     -webkit-font-smoothing: antialiased;
-    transition-timing-function: ease;
-    transition-duration: 75ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-energetic);
     transition-property: font-variation-settings, transform;
   }
-  .jkl-icon--bold {
-    --jkl-icon-weight: var(--jkl-icon-weight-bold);
-  }
   .jkl-icon--filled {
     --jkl-icon-fill: 1;
   }
@@ -309,9 +276,9 @@
   .jkl-animated-horizontal-arrows__slider,
   .jkl-animated-vertical-arrows__slider {
     display: flex;
-    transition-timing-function: ease;
-    transition-duration: 250ms;
-    transition-delay: calc(250ms * 0.3333333333);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-expressive);
+    transition-delay: calc(var(--jkl-motion-timing-expressive) * 0.3333333333);
     transition-property: transform;
   }
   .jkl-animated-horizontal-arrows__arrow,
@@ -339,8 +306,8 @@
     transform: translate3d(-50%, 0, 0);
   }
   .jkl-icons-animated__plus {
-    transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
-    transition-duration: 250ms;
+    transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
+    transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: transform;
     transform-origin: 50% 50%;
   }
@@ -359,8 +326,8 @@
     position: relative;
     transition-property: box-shadow;
     padding: 0;
-    transition-timing-function: cubic-bezier(0.6, 0.2, 0.35, 1);
-    transition-duration: 100ms;
+    transition-timing-function: var(--jkl-motion-easing-focus);
+    transition-duration: var(--jkl-motion-timing-snappy);
   }
   .jkl-icon-button {
     outline: 0;
@@ -436,17 +403,14 @@
     --jkl-form-support-label-icon-size: 1.25rem;
     --jkl-form-support-label-icon-margin: 0 -1.25rem -0.375rem 0;
     --color: var(--jkl-color-text-subdued);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 400ms;
+    font: var(--jkl-text-style-text-small);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-lazy);
     display: flex;
     margin: var(--jkl-form-support-label-margin);
     color: var(--color);
     transition-property: color;
-    transition-delay: 150ms;
+    transition-delay: var(--jkl-motion-timing-productive);
   }
   .jkl-form-support-label__icon, .jkl-form-support-label__icon.jkl-icon {
     opacity: 0;
@@ -467,7 +431,7 @@
     --color: var(--jkl-color-text-default);
   }
   .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uz58f67 forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-udz455c forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -487,22 +451,13 @@
     color: var(--jkl-color-text-default);
   }
   .jkl-label--small {
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-label--medium {
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-label--large {
-    font-size: var(--jkl-font-size-5);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-large);
   }
   .jkl-label--sr-only {
     border: 0 !important;
@@ -521,10 +476,7 @@
     top: -0.1ex;
   }
   .jkl-input-group-description {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     color: var(--jkl-color-text-subdued);
     margin-block-end: var(--jkl-spacing-8);
     max-inline-size: 50ch;
@@ -533,14 +485,14 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uz58f67 {
+  @keyframes jkl-support-icon-entrance-udz455c {
     0% {
       margin-right: 0;
       opacity: 0;
       transform: scale(1);
     }
     30% {
-      margin-right: 0.5rem;
+      margin-right: var(--jkl-spacing-8);
     }
     50% {
       opacity: 1;
@@ -554,7 +506,7 @@
     100% {
       transform: scale(1);
       opacity: 1;
-      margin-right: 0.5rem;
+      margin-right: var(--jkl-spacing-8);
     }
   }
 }
@@ -576,17 +528,13 @@
   }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus {
     --jkl-icon-weight: 400;
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
     letter-spacing: -0.014em;
   }
   .jkl-tooltip-content {
     --content-padding: var(--jkl-unit-15);
     --background-color: var(--jkl-color-background-container-inverted);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
     background-color: var(--background-color);
     color: var(--jkl-color-text-inverted);
     display: inline-block;
@@ -602,8 +550,8 @@
     }
   }
   .jkl-tooltip-question-button {
-    transition-timing-function: ease-in;
-    transition-duration: 100ms;
+    transition-timing-function: var(--jkl-motion-easing-exit);
+    transition-duration: var(--jkl-motion-timing-snappy);
     transition-property: color;
     cursor: pointer;
     position: relative;
@@ -689,8 +637,8 @@
     color: inherit;
     outline: none;
     text-decoration: none;
-    transition-timing-function: ease;
-    transition-duration: 75ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-energetic);
     transition-property: color;
   }
   .jkl-link__content {
@@ -707,22 +655,21 @@
   .jkl-link--external::after, .jkl-link[target=_blank]::after, .jkl-link[download]::after {
     --jkl-icon-fill: 0;
     --jkl-icon-size: 1em;
-    --jkl-icon-opsz: 20;
     content: "\e89e"/"(Åpnes i ny fane)";
     margin-block-start: -0.1em;
     padding-inline-start: 0.2em;
     vertical-align: middle;
     font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
-    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
+    font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
     font-feature-settings: "liga";
     -webkit-font-feature-settings: "liga";
     font-size: 1.3em;
-    font-weight: var(--jkl-icon-weight, 300);
+    font-weight: 400;
     line-height: 1;
     display: inline-block;
     -webkit-font-smoothing: antialiased;
-    transition-timing-function: ease;
-    transition-duration: 75ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-energetic);
     transition-property: font-variation-settings, transform;
     display: inline;
   }
@@ -757,11 +704,8 @@
     --border-radius: 0;
     --border-width: 0.0625rem;
     display: inline-block;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    font-weight: 700;
+    font: var(--jkl-text-style-text-medium);
+    font-weight: var(--jkl-font-weight-bold);
     cursor: pointer;
     user-select: none;
     background: var(--background-color);
@@ -776,8 +720,8 @@
     overflow: hidden;
     max-width: 100%;
     animation: a 0.3s linear;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: background-color;
   }
   .jkl-button:has(.jkl-button__text) {
@@ -793,19 +737,19 @@
     padding-inline: var(--jkl-button-padding-icon-button);
   }
   .jkl-button__label {
-    transition-timing-function: ease;
-    transition-duration: 250ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: translate;
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: calc(var(--jkl-unit-base) * 0.25);
+    gap: var(--jkl-unit-02);
     pointer-events: none;
   }
   .jkl-button__loader {
-    transition-timing-function: ease;
-    transition-duration: 250ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: opacity, translate;
     position: absolute;
     top: 50%;
@@ -885,22 +829,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uz58f6g;
+    animation-name: jkl-loader-left-spin-udz455l;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uz58f73;
+    animation-name: jkl-loader-middle-spin-udz4564;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uz58f7o;
+    animation-name: jkl-loader-right-spin-udz456e;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uz58f6g {
+  @keyframes jkl-loader-left-spin-udz455l {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -914,7 +858,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uz58f73 {
+  @keyframes jkl-loader-middle-spin-udz4564 {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -931,7 +875,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uz58f7o {
+  @keyframes jkl-loader-right-spin-udz456e {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -971,7 +915,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-uz58f86;
+      animation: 2s ease infinite jkl-blink-udz456m;
     }
   }
   .jkl-skeleton-input {
@@ -1019,10 +963,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-uz58f86;
+      animation: 2s ease-in-out infinite jkl-blink-udz456m;
     }
   }
-  @keyframes jkl-blink-uz58f86 {
+  @keyframes jkl-blink-udz456m {
     0% {
       opacity: 1;
     }
@@ -1069,8 +1013,8 @@
     pointer-events: none;
     border-radius: var(--border-radius);
     border: var(--border-width) solid var(--border-color);
-    transition-timing-function: ease;
-    transition-duration: 100ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-snappy);
     transition-property: border-color, border-size;
   }
   @media (min-width: 680px) {
@@ -1140,8 +1084,8 @@
     filter: blur(20px);
   }
   .jkl-image__image {
-    transition-timing-function: ease;
-    transition-duration: 400ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-lazy);
     transition-property: opacity;
     opacity: 1;
   }
@@ -1163,11 +1107,8 @@
   --gap: var(--jkl-unit-05);
   --background-color: var(--jkl-color-background-alert-neutral);
   --text-color: var(--jkl-color-text-on-alert);
-  font-size: var(--jkl-font-size-2);
-  line-height: var(--jkl-line-height-tight);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-  font-weight: 700;
+  font: var(--jkl-text-style-text-small);
+  font-weight: var(--jkl-font-weight-bold);
   background-color: var(--background-color);
   color: var(--text-color);
   border-radius: 0.25rem;
@@ -1210,31 +1151,16 @@
 }
 
 @layer jokul.components {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-checkbox-error-color: #ab2e43;
-    }
-  }
-  [data-theme=light] {
-    --jkl-checkbox-error-color: #ab2e43;
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-checkbox-error-color: #d79ba5;
-    }
-  }
-  [data-theme=dark] {
-    --jkl-checkbox-error-color: #d79ba5;
-  }
   .jkl-checkbox {
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+    --jkl-checkbox-error-color: #ab2e43;
+    --jkl-checkbox-error-color: light-dark(#ab2e43, #d79ba5);
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
     --box-color: var(--jkl-color-border-action);
     --check-color: var(--jkl-color-border-action);
     --text-color: var(--jkl-color-text-default);
     --background-color: transparent;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
     display: flex;
     flex-wrap: wrap;
     color: var(--text-color);
@@ -1250,31 +1176,25 @@
   .jkl-checkbox__label {
     cursor: pointer;
     display: flex;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-  }
-  .jkl-checkbox__label:hover, .jkl-checkbox__label:active {
-    --jkl-icon-weight: 400;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-checkbox__label::before {
     content: "check_box_outline_blank";
     margin-inline-end: 0.25em;
     font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
-    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
+    font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
     font-feature-settings: "liga";
     -webkit-font-feature-settings: "liga";
     font-size: 1.3em;
-    font-weight: var(--jkl-icon-weight, 300);
+    font-weight: 400;
     line-height: 1;
     display: inline-block;
     -webkit-font-smoothing: antialiased;
-    transition-timing-function: ease;
-    transition-duration: 75ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-energetic);
     transition-property: font-variation-settings, transform;
   }
   .jkl-checkbox__label:has(+ :checked)::before {
@@ -1310,8 +1230,8 @@
     display: flex;
     flex-direction: column;
     interpolate-size: allow-keywords;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: box-shadow;
   }
   .jkl-input-panel__header {
@@ -1327,11 +1247,8 @@
     display: flex;
     height: 100%;
     align-items: center;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    font-weight: 700;
+    font: var(--jkl-text-style-text-medium);
+    font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-input-panel__header label,
   .jkl-input-panel__header .jkl-radio-button,
@@ -1352,12 +1269,9 @@
     padding-inline: var(--padding-inline);
     padding-block-end: var(--jkl-spacing-none);
     line-height: initial;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    font: var(--jkl-text-style-paragraph-medium);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: height;
   }
   .jkl-input-panel:has(:focus-visible) {
@@ -1392,11 +1306,8 @@
   --border-color: var(--jkl-color-border-separator);
   --background-color: transparent;
   --border-width: 0.0625rem;
-  font-size: var(--jkl-font-size-2);
-  line-height: var(--jkl-line-height-tight);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-  font-weight: 700;
+  font: var(--jkl-text-style-text-small);
+  font-weight: var(--jkl-font-weight-bold);
   cursor: pointer;
   position: relative;
   background-color: var(--background-color);
@@ -1424,8 +1335,8 @@
   inset: 0;
   border-radius: inherit;
   background-color: var(--text-color);
-  transition-timing-function: ease;
-  transition-duration: 150ms;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: opacity;
 }
 .jkl-chip:focus-visible {
@@ -1521,12 +1432,9 @@
     position: relative;
     display: flex;
     align-items: center;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    font: var(--jkl-text-style-text-medium);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color, box-shadow, background-color;
     background-color: var(--background-color);
     color: var(--text-color);
@@ -1616,10 +1524,7 @@
     background: none;
     -webkit-appearance: none;
     color: inherit;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-combobox__search-input {
     outline: 0;
@@ -1664,8 +1569,8 @@
   .jkl-combobox__arrow {
     pointer-events: none;
     transform: translateY(-50%);
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: transform, color;
   }
   @media screen and (forced-colors: active) {
@@ -1679,8 +1584,8 @@
     }
   }
   .jkl-combobox__menu {
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: height;
     top: calc(100% - 1px);
     overflow-y: auto;
@@ -1695,12 +1600,9 @@
     max-height: calc((var(--jkl-combobox-max-shown-options, 5) + 0.5) * var(--jkl-combobox-input-height));
   }
   .jkl-combobox__option {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    font: var(--jkl-text-style-text-small);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     display: flex;
     align-items: center;
     border: 0;
@@ -1717,10 +1619,7 @@
     background-color: var(--jkl-color-background-interactive-hover);
   }
   .jkl-combobox__option-description {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     color: var(--jkl-color-text-subdued);
     display: block;
     width: 100%;
@@ -1786,46 +1685,21 @@
     transition: 0.2s;
   }
   .jkl-cookie-consent-modal__info-text {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-cookie-consent-modal__checkbox {
     margin-bottom: var(--jkl-unit-10);
     margin-top: var(--jkl-unit-30);
   }
 }
-/*
- * NOTE: These icon also exists as a copy in the jkl-icons-react package.
- *       If you're here to change them, consider changing them there as well, or
- *       finding a technical solution to sharing the SVG markup
- */
-@media screen and (prefers-color-scheme: light) {
-  :root {
-    --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23F6B3B3'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
-    --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23ACD3B5'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
-  }
-}
-[data-theme=light] {
-  --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23F6B3B3'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
-  --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23ACD3B5'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23DE9E9E'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
-    --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%2394B79B'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
-  }
-}
-[data-theme=dark] {
-  --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23DE9E9E'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
-  --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%2394B79B'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
-}
-
 @layer jokul.components {
   .jkl-list {
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+    --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23F6B3B3'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
+    --jkl-list-marker-cross: light-dark(url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23F6B3B3'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23DE9E9E'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A"));
+    --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23ACD3B5'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
+    --jkl-list-marker-check: light-dark(url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23ACD3B5'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%2394B79B'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A"));
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
     --list-text-color: var(--jkl-color-text-default);
     list-style-type: "•";
     padding-left: var(--jkl-unit-20);
@@ -1891,7 +1765,6 @@
   }
 }
 @layer jokul.components {
-  /* Base layout */
   .jkl-modal-container,
   .jkl-modal-overlay {
     position: fixed;
@@ -1900,46 +1773,29 @@
   .jkl-modal-container {
     z-index: 9000;
     display: flex;
-    align-items: center;
-    justify-content: center;
   }
   .jkl-modal-container[aria-hidden=true] {
-    visibility: hidden;
-    pointer-events: none;
+    display: none;
   }
-}
-@layer jokul.components {
   .jkl-modal-overlay {
     background-color: rgba(27, 25, 23, 0.8);
-    opacity: 0;
-    transition-timing-function: ease-out;
-    transition-duration: 250ms;
-    transition-property: opacity;
-  }
-  .jkl-modal-container:not([aria-hidden=true]) .jkl-modal-overlay {
-    opacity: 1;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .jkl-modal-overlay {
-      transition-duration: 0ms;
-    }
   }
-}
-@layer jokul.components {
   .jkl-modal {
-    --margin: var(--jkl-spacing-m);
-    container-type: inline-size;
-    box-sizing: border-box;
-    margin: var(--margin);
-    padding: var(--modal-padding, var(--jkl-unit-40));
+    --jkl-modal-padding: var(--jkl-unit-50);
+    --jkl-modal-min-width: 13.75rem;
+    --jkl-modal-max-width: 41.25rem;
+    margin: auto;
     z-index: 9000;
+    position: relative;
     background-color: var(--jkl-color-background-container-high);
-    border-radius: var(--jkl-border-radius-l);
+    border-radius: 0.125rem;
     box-shadow: 0 0.25rem 0.75rem rgba(37, 42, 49, 0.03);
-    width: min(100vw - 2 * var(--margin), var(--modal-width, 60ch));
-    max-width: none;
+    width: 100%;
+    min-width: var(--jkl-modal-min-width);
+    max-width: var(--jkl-modal-max-width);
     max-height: 90vh;
     overflow: auto;
+    padding: var(--jkl-modal-padding);
     display: flex;
     flex-direction: column;
   }
@@ -1948,120 +1804,48 @@
       border-color: CanvasText;
     }
   }
-}
-@layer jokul.components {
-  .jkl-modal-container--slide-in {
-    --jkl-modal-slide-x: 0px;
-    --jkl-modal-slide-y: 12px;
-    transition-timing-function: ease-in;
-    transition-duration: 250ms;
-    transition-property: visibility;
-    transition-duration: 0ms;
-  }
-  .jkl-modal-container--slide-in[aria-hidden=true] {
-    display: flex;
-    visibility: hidden;
-    pointer-events: none;
-    transition-delay: 250ms;
-  }
-  .jkl-modal-container--slide-in:not([aria-hidden=true]) {
-    visibility: visible;
-    transition-delay: 0ms;
-  }
-  .jkl-modal-container--slide-in .jkl-modal {
-    transition-timing-function: ease-out;
-    transition-duration: 250ms;
-    transition-property: transform, opacity;
-    transform: translate(var(--jkl-modal-slide-x), var(--jkl-modal-slide-y));
-    opacity: 0;
-    will-change: transform, opacity;
-  }
-  .jkl-modal-container--slide-in:not([aria-hidden=true]) .jkl-modal {
-    transform: translate(0, 0);
-    opacity: 1;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .jkl-modal-container--slide-in .jkl-modal {
-      transition-duration: 0ms;
+  @media (width >= 0) and (max-width: 679px) {
+    .jkl-modal {
+      margin: auto var(--jkl-unit-30);
     }
   }
-}
-@layer jokul.components {
-  /* Placement: bottom */
-  .jkl-modal-container--placement-bottom {
-    align-items: flex-end;
-  }
-  .jkl-modal-container--placement-bottom.jkl-modal-container--slide-in {
-    --jkl-modal-slide-x: 0px;
-    --jkl-modal-slide-y: 24px;
-  }
-  .jkl-modal-container--placement-bottom .jkl-modal {
-    --margin: 0px;
-    width: min(100vw, var(--modal-width, 100vw));
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  /* Placement: left */
-  .jkl-modal-container--placement-left {
-    justify-content: flex-start;
-  }
-  .jkl-modal-container--placement-left.jkl-modal-container--slide-in {
-    --jkl-modal-slide-x: -24px;
-    --jkl-modal-slide-y: 0px;
-  }
-  .jkl-modal-container--placement-left .jkl-modal {
-    height: 100%;
-    max-height: 100%;
-    margin-block: 0;
-    margin-inline-start: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-  /* Placement: right */
-  .jkl-modal-container--placement-right {
-    justify-content: flex-end;
-  }
-  .jkl-modal-container--placement-right.jkl-modal-container--slide-in {
-    --jkl-modal-slide-x: 24px;
-    --jkl-modal-slide-y: 0px;
+  .jkl-modal-header {
+    --jkl-modal-header-margin: 0 0 var(--jkl-unit-20);
   }
-  .jkl-modal-container--placement-right .jkl-modal {
-    height: 100%;
-    max-height: 100%;
-    margin-block: 0;
-    margin-inline-end: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+  @media (width >= 0) and (max-width: 679px) {
+    .jkl-modal-header {
+      --jkl-modal-header-margin: 0 0 var(--jkl-unit-15);
+    }
   }
-}
-@layer jokul.components {
   .jkl-modal-header {
-    --jkl-modal-header-margin: 0 0 var(--jkl-unit-20);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     margin: var(--jkl-modal-header-margin);
+    gap: var(--jkl-modal-gap);
   }
   .jkl-modal-body {
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-paragraph-medium);
   }
   .jkl-modal-title {
-    font-size: var(--jkl-font-size-6);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 700;
-    --jkl-icon-weight: 400;
+    font: var(--jkl-text-style-heading-3);
   }
   .jkl-modal-actions {
-    margin-block-start: var(--jkl-unit-50);
+    --jkl-modal-actions-margin: var(--jkl-unit-50) 0 0 0;
+  }
+  @media (width >= 0) and (max-width: 679px) {
+    .jkl-modal-actions {
+      --jkl-modal-actions-margin: var(--jkl-unit-40) 0 0 0;
+    }
+  }
+  .jkl-modal-actions {
+    margin: var(--jkl-modal-actions-margin);
     display: flex;
     flex-direction: column;
-    gap: var(--jkl-unit-15) var(--jkl-unit-20);
+    gap: var(--jkl-unit-20);
   }
-  @container (width > 35ch /* ~380px ved vanlig zoom/size */) {
+  @media (min-width: 60ch) {
     .jkl-modal-actions {
       flex-direction: row-reverse;
       align-self: flex-end;
@@ -2093,10 +1877,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-uz58f9a var(--duration) linear forwards;
+    animation: jkl-downcount-udz458g var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-uz58f9a {
+  @keyframes jkl-downcount-udz458g {
     from {
       width: 100%;
     }
@@ -2106,16 +1890,12 @@
   }
 }
 @layer jokul.components {
-  .jkl-calendar {
-    --jkl-calendar-padding: var(--jkl-unit-15) var(--jkl-unit-20) var(--jkl-unit-20);
-    --jkl-calendar-gap: var(--jkl-unit-15);
-  }
   @media (width >= 0) and (max-width: 374px) {
-    .jkl-calendar {
-      --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20);
-    }
+    --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20);
   }
   .jkl-calendar {
+    --jkl-calendar-padding: var(--jkl-unit-15) var(--jkl-unit-20) var(--jkl-unit-20);
+    --jkl-calendar-gap: var(--jkl-unit-15);
     display: block;
     background-color: var(--jkl-color-background-container-high);
     color: var(--jkl-color);
@@ -2155,11 +1935,8 @@
   }
   .jkl-calendar-navigation-dropdown__select {
     appearance: none;
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    font-weight: 700;
+    font: var(--jkl-text-style-text-small);
+    font-weight: var(--jkl-font-weight-bold);
     background-color: transparent;
     color: inherit;
     border-radius: 0;
@@ -2210,10 +1987,7 @@
 }
 @layer jokul.components {
   .jkl-calendar-table th {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     padding-bottom: var(--jkl-unit-10);
   }
   .jkl-calendar-table td {
@@ -2228,19 +2002,12 @@
   }
 }
 @layer jokul.components {
-  .jkl-calendar-date-button {
-    --jkl-calendar-date-size: var(--jkl-unit-50);
-  }
   @media (width >= 0) and (max-width: 374px) {
-    .jkl-calendar-date-button {
-      --jkl-calendar-date-size: var(--jkl-unit-40);
-    }
+    --jkl-calendar-date-size: var(--jkl-unit-40);
   }
   .jkl-calendar-date-button {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    --jkl-calendar-date-size: var(--jkl-unit-50);
+    font: var(--jkl-text-style-text-small);
     appearance: none;
     position: relative;
     box-sizing: border-box;
@@ -2255,8 +2022,8 @@
     margin: var(--jkl-calendar-date-margin);
     padding: 0;
     padding-top: var(--jkl-unit-02);
-    transition-timing-function: ease-out;
-    transition-duration: 75ms;
+    transition-timing-function: var(--jkl-motion-easing-entrance);
+    transition-duration: var(--jkl-motion-timing-energetic);
     transition-property: color, background-color, box-shadow;
   }
   .jkl-calendar-date-button {
@@ -2280,15 +2047,12 @@
     }
   }
   .jkl-calendar-date-button[data-adjacent=true] {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     padding: 0;
     color: var(--jkl-color-text-subdued);
   }
   .jkl-calendar-date-button[aria-current=date] {
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-calendar-date-button:hover:not(:disabled) {
     background-color: var(--jkl-color-background-interactive-hover);
@@ -2363,26 +2127,14 @@
   }
 }
 @layer jokul.components {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
-    }
-  }
-  [data-theme=light] {
-    --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
-    }
-  }
-  [data-theme=dark] {
-    --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
-  }
   .jkl-popover {
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+    --shadow-color: rgb(49 48 48 / 20%);
+    --shadow-color: light-dark(rgb(49 48 48 / 20%), rgb(0 0 0 / 50%));
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
     padding: var(--popover-padding, 0);
     z-index: 10000;
-    box-shadow: 0 4px 20px 0 var(--jkl-datepicker-box-shadow);
+    box-shadow: 0 4px 20px 0 var(--shadow-color);
     background-color: var(--jkl-color-background-container-high);
     border-radius: var(--jkl-border-radius-s);
   }
@@ -2406,7 +2158,7 @@
     display: unset;
   }
   .jkl-description-list__term {
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-description-list__detail {
     margin-left: 0;
@@ -2540,13 +2292,13 @@
   }
   .jkl-expander--open .jkl-expander__label {
     --jkl-icon-weight: 400;
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
     letter-spacing: -0.014em;
   }
   .jkl-expander--open .jkl-expander__chevron {
     transform: rotate(-0.5turn);
-    transition-timing-function: ease;
-    transition-duration: 100ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-snappy);
   }
   @media (hover: hover) {
     .jkl-expander:hover {
@@ -2581,8 +2333,8 @@
   .jkl-feedback__submit-wrapper {
     width: 100%;
     transition-property: height;
-    transition-timing-function: ease;
-    transition-duration: 250ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-expressive);
   }
   .jkl-feedback__submit-wrapper--hidden {
     display: none;
@@ -2590,19 +2342,15 @@
   .jkl-feedback__step-counter {
     color: var(--jkl-color-text-subdued);
     margin-bottom: var(--jkl-unit-20);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uz58f9x 0.25s ease-out;
+    animation: jkl-show-udz4593 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uz58f9x {
+  @keyframes jkl-show-udz4593 {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2615,7 +2363,7 @@
     width: 100%;
     max-width: 22.5rem;
     flex-wrap: nowrap;
-    gap: 0.75rem;
+    gap: var(--jkl-spacing-12);
   }
   .jkl-feedback-smiley-option {
     display: inline-block;
@@ -2625,8 +2373,8 @@
     width: 2.5rem;
     color: var(--jkl-color-text-subdued);
     transform: translate3d(0, 0, 0);
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: transform, color;
   }
   @media screen and (forced-colors: active) {
@@ -2644,8 +2392,8 @@
     position: absolute;
     border-radius: 50%;
     opacity: 0;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: opacity;
   }
   .jkl-feedback-smiley-option::after {
@@ -2691,16 +2439,10 @@
     align-items: start;
     grid-template-areas: "icon content dismiss";
     grid-template-columns: auto 1fr auto;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-paragraph-medium);
   }
   .jkl-message:has(.jkl-message__title) {
-    font-size: var(--jkl-font-size-4);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 700;
-    --jkl-icon-weight: 400;
+    font: var(--jkl-text-style-heading-5);
   }
   .jkl-message__icon {
     grid-area: icon;
@@ -2718,17 +2460,11 @@
     grid-area: content;
   }
   .jkl-message__message {
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-paragraph-medium);
     margin-top: -0.125rem;
   }
   .jkl-message__title {
-    font-size: var(--jkl-font-size-4);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 700;
-    --jkl-icon-weight: 400;
+    font: var(--jkl-text-style-heading-5);
     margin: var(--jkl-message-title-margin);
   }
   .jkl-message__title ~ .jkl-message__message {
@@ -2819,8 +2555,8 @@
     --background-color: var(--jkl-color-background-alert-success);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-uz58fa3 400ms ease-in-out forwards;
-    transition: visibility 0ms 400ms;
+    animation: jkl-dismiss-udz45a1 var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
   @media screen and (forced-colors: active) {
@@ -2839,9 +2575,9 @@
     }
   }
   .jkl-form-error-message {
-    padding-bottom: calc(var(--jkl-unit-base) * 5);
+    padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-uz58fa3 {
+  @keyframes jkl-dismiss-udz45a1 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -2853,23 +2589,11 @@
   }
 }
 @layer jokul.components {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-radio-button-error-color: #ab2e43;
-    }
-  }
-  [data-theme=light] {
-    --jkl-radio-button-error-color: #ab2e43;
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-radio-button-error-color: #d79ba5;
-    }
-  }
-  [data-theme=dark] {
-    --jkl-radio-button-error-color: #d79ba5;
-  }
   .jkl-radio-button {
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+    --jkl-radio-button-error-color: #ab2e43;
+    --jkl-radio-button-error-color: light-dark(#ab2e43, #d79ba5);
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
     display: flex;
     position: relative;
   }
@@ -2903,31 +2627,25 @@
   .jkl-radio-button__label {
     cursor: pointer;
     display: flex;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-  }
-  .jkl-radio-button__label:hover, .jkl-radio-button__label:active {
-    --jkl-icon-weight: 400;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-radio-button__label::before {
     content: "radio_button_unchecked";
     margin-inline-end: 0.25em;
     font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
-    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
+    font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
     font-feature-settings: "liga";
     -webkit-font-feature-settings: "liga";
     font-size: 1.3em;
-    font-weight: var(--jkl-icon-weight, 300);
+    font-weight: 400;
     line-height: 1;
     display: inline-block;
     -webkit-font-smoothing: antialiased;
-    transition-timing-function: ease;
-    transition-duration: 75ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-energetic);
     transition-property: font-variation-settings, transform;
   }
   .jkl-radio-button__label:has(+ :checked)::before {
@@ -2949,7 +2667,7 @@
   .jkl-radio-button + .jkl-form-support-label {
     margin-left: 1.75em;
     margin-top: 0.25lh;
-    margin-bottom: var(--jkl-unit-base);
+    margin-bottom: var(--jkl-unit-10);
   }
 }
 @layer jokul.components {
@@ -2973,12 +2691,9 @@
     position: relative;
     display: flex;
     align-items: center;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    font: var(--jkl-text-style-text-medium);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color, box-shadow, background-color;
     background-color: var(--background-color);
     color: var(--text-color);
@@ -3057,16 +2772,13 @@
     max-height: var(--text-input-height);
     height: var(--text-input-height);
     min-height: var(--text-input-height);
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: height, min-height, max-height, padding;
     background: none;
     -webkit-appearance: none;
     color: inherit;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-text-area__text-area {
     outline: 0;
@@ -3132,10 +2844,7 @@
   .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-count {
     padding: var(--jkl-text-input-padding);
     color: var(--text-color);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
   }
   .jkl-text-area:has(.jkl-text-area__counter) .jkl-text-area__counter-progress {
     background-color: transparent;
@@ -3150,8 +2859,8 @@
     height: var(--progress-bar-height);
     background-color: var(--border-color);
     transition-property: width;
-    transition-timing-function: ease;
-    transition-duration: 400ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-lazy);
   }
   .jkl-text-area__text-area--3-rows:focus,
   .jkl-text-area__text-area--3-rows:not(:placeholder-shown),
@@ -3238,11 +2947,11 @@
     --border: 1px solid var(--jkl-color-border-separator);
     --border-radius: 2px;
     --bg: transparent;
-    --transition-time: 250ms;
+    --transition-time: var(--jkl-motion-timing-expressive);
   }
   .jkl-file__content {
-    transition-timing-function: ease;
-    transition-duration: 100ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-snappy);
     transition-property: background-color, border-color, color;
     color: var(--jkl-color-text-default);
     padding: var(--jkl-file-padding);
@@ -3257,11 +2966,7 @@
     height: fit-content;
   }
   .jkl-file__content__name {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
     grid-area: text;
     /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
     word-break: break-word;
@@ -3331,11 +3036,7 @@
     grid-template-areas: "image image" "text button";
   }
   .jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src]))::before {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
     content: attr(data-filetype);
   }
   .jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img {
@@ -3386,8 +3087,8 @@
     flex-direction: column;
     flex-wrap: nowrap;
     gap: var(--jkl-file-input-dropzone-gap);
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: background-color;
     background-color: var(--background-color);
   }
@@ -3397,11 +3098,7 @@
     border-style: solid;
   }
   .jkl-file-input__dropzone__drag-text {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
   }
   @media (width >= 0) and (max-width: 679px) {
     .jkl-file-input__dropzone__drag-text {
@@ -3430,10 +3127,7 @@
     display: none;
   }
   .jkl-file-input__max-size-text {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     color: var(--jkl-color-text-subdued);
     margin-top: var(--jkl-unit-30);
   }
@@ -3458,11 +3152,8 @@
     max-width: fit-content;
   }
   .jkl-file-input--small .jkl-file-input__call-to-action {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    gap: calc(var(--jkl-unit-base) * 1.5);
+    font: var(--jkl-text-style-text-small);
+    gap: var(--jkl-unit-15);
     flex-direction: row;
     justify-content: flex-start;
   }
@@ -3475,18 +3166,11 @@
   .jkl-link-list {
     --border: 1px solid var(--jkl-color-border-separator);
     --text-color: var(--jkl-color-text-default);
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-paragraph-medium);
   }
   .jkl-link-list .jkl-link-list-title {
     margin-block-end: var(--jkl-unit-10);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-link-list ul {
     display: flex;
@@ -3510,30 +3194,27 @@
     text-wrap: balance;
     box-sizing: border-box;
     padding: var(--jkl-unit-20);
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    font: var(--jkl-text-style-text-medium);
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: background;
   }
   .jkl-link-list ul .jkl-link-list-link::after {
     content: "arrow_forward"/"";
     font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
-    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
+    font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
     font-feature-settings: "liga";
     -webkit-font-feature-settings: "liga";
     font-size: 1.3em;
-    font-weight: var(--jkl-icon-weight, 300);
+    font-weight: 400;
     line-height: 1;
     display: inline-block;
     -webkit-font-smoothing: antialiased;
-    transition-timing-function: ease;
-    transition-duration: 75ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-energetic);
     transition-property: font-variation-settings, transform;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: translate;
   }
   .jkl-link-list ul .jkl-link-list-link:is(:hover, :focus-visible) {
@@ -3589,13 +3270,13 @@
     transform: translateX(-5%);
   }
   .jkl-logo--animated .jkl-logo__F {
-    transition: transform 250ms 75ms cubic-bezier(0.5, 0, 0.62, 1);
+    transition: transform var(--jkl-motion-timing-expressive) var(--jkl-motion-timing-energetic) cubic-bezier(0.5, 0, 0.62, 1);
   }
   .jkl-logo--animated .jkl-logo__F-line {
-    transition: transform 250ms ease-in;
+    transition: transform var(--jkl-motion-timing-expressive) ease-in;
   }
   .jkl-logo--animated .jkl-logo__fremtind {
-    transition: opacity 250ms 75ms ease-in, transform 250ms ease;
+    transition: opacity var(--jkl-motion-timing-expressive) var(--jkl-motion-timing-energetic) ease-in, transform var(--jkl-motion-timing-expressive) ease;
   }
   .jkl-logo--centered.jkl-logo--symbol-only .jkl-logo__F {
     transform: translateX(35%) rotate(45deg);
@@ -3616,7 +3297,7 @@
   .jkl-logo-stamp--animated .jkl-logo-stamp__text {
     transform-origin: 256px 256px;
     transition-timing-function: cubic-bezier(0.75, 0, 0, 1);
-    transition-duration: 150ms;
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: transform;
   }
   .jkl-logo-stamp--animated[data-rotate=true] .jkl-logo-stamp__text {
@@ -3635,10 +3316,7 @@
     cursor: pointer;
     box-sizing: border-box;
     user-select: none;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
     display: flex;
     align-items: center;
     gap: var(--jkl-unit-10);
@@ -3702,23 +3380,11 @@
   }
 }
 @layer jokul.components {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-menu-border-color: transparent;
-    }
-  }
-  [data-theme=light] {
-    --jkl-menu-border-color: transparent;
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-menu-border-color: var(--jkl-color-border-input-focus);
-    }
-  }
-  [data-theme=dark] {
-    --jkl-menu-border-color: var(--jkl-color-border-input-focus);
-  }
   .jkl-menu {
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
+    --border-color: transparent;
+    --border-color: light-dark(transparent, var(--jkl-color-border-input-focus));
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
     background-color: var(--jkl-color-background-container-high);
     width: 100%;
     max-width: 21rem;
@@ -3728,7 +3394,7 @@
     flex-wrap: nowrap;
     box-shadow: 0 0.25rem 1.25rem rgba(49, 48, 48, 0.2);
     border-radius: 0.125rem;
-    border: 2px solid var(--jkl-menu-border-color);
+    border: 2px solid var(--border-color);
     z-index: 7000;
   }
   .jkl-menu:focus-visible {
@@ -3742,7 +3408,7 @@
   .jkl-nav-link {
     color: var(--jkl-color-text-default);
     box-sizing: border-box;
-    font-weight: var(--jkl-typography-weight-normal);
+    font-weight: var(--jkl-font-weight-normal);
     text-decoration: none;
     position: relative;
     padding-right: 0.15rem;
@@ -3782,13 +3448,13 @@
     margin-inline-start: 0.1em;
     margin-block-start: -0.1em;
     vertical-align: middle;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: transform;
   }
   .jkl-nav-link--active {
     --jkl-icon-weight: 400;
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
     letter-spacing: -0.014em;
   }
   .jkl-nav-link--back {
@@ -3817,12 +3483,9 @@
   background-color: var(--jkl-color-background-container-low);
   padding: var(--jkl-spacing-s);
   border-radius: 0;
-  font-size: var(--jkl-font-size-3);
-  line-height: var(--jkl-line-height-relaxed);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-  transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
-  transition-duration: 150ms;
+  font: var(--jkl-text-style-paragraph-medium);
+  transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: background-color;
 }
 .jkl-navlink--beta .title,
@@ -3838,19 +3501,19 @@
   grid-row: 1/span 999;
   translate: 0;
   font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
-  font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
+  font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
   font-feature-settings: "liga";
   -webkit-font-feature-settings: "liga";
   font-size: 1.3em;
-  font-weight: var(--jkl-icon-weight, 300);
+  font-weight: 400;
   line-height: 1;
   display: inline-block;
   -webkit-font-smoothing: antialiased;
-  transition-timing-function: ease;
-  transition-duration: 75ms;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-energetic);
   transition-property: font-variation-settings, transform;
-  transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
-  transition-duration: 150ms;
+  transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: translate;
 }
 .jkl-navlink--beta:hover, .jkl-navlink--beta:focus-visible {
@@ -3906,7 +3569,7 @@
   }
   .jkl-pagination-button--current {
     --jkl-icon-weight: 400;
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
     letter-spacing: -0.014em;
   }
   .jkl-pagination-button--elipsis {
@@ -3997,12 +3660,9 @@
     /* Øk padding for å gi plass til ikonet */
     padding-inline-end: 2.05em;
     transition-property: color, border-color, box-shadow;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-select__search-input--active-value, .jkl-select__button--active-value {
     color: var(--jkl-color-text-default);
@@ -4034,8 +3694,8 @@
     color: var(--jkl-color-text-default);
     transform: translateY(-50%);
     transition-property: transform, color;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
   }
   @media screen and (forced-colors: active) {
     .jkl-select__arrow {
@@ -4064,8 +3724,8 @@
     overflow-y: auto;
     max-height: calc((var(--jkl-select-max-shown-options, 5) + 0.5) * var(--min-option-height));
     transition-property: height;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
   }
   .jkl-select__option-wrapper {
     margin: 0;
@@ -4084,12 +3744,9 @@
     position: relative;
     padding: var(--option-padding);
     cursor: pointer;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
+    font: var(--jkl-text-style-text-medium);
     /* For å unngå "dobbel" markering skrur vi av markering på hover i React-
     komponenten med data-focus="controlled". Uten dette satt vil valgene
     markeres ved hover som normalt. */
@@ -4102,10 +3759,7 @@
     color: var(--jkl-color-text-subdued);
     display: block;
     width: 100%;
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
   }
   .jkl-select {
     /* --------
@@ -4156,7 +3810,7 @@
       border-top: 1px solid SelectedItem;
       border-bottom: 1px solid SelectedItem;
       --jkl-icon-weight: 400;
-      font-weight: 700;
+      font-weight: var(--jkl-font-weight-bold);
       letter-spacing: -0.014em;
     }
   }
@@ -4187,10 +3841,10 @@
   }
   .jkl-progress-bar__tracker {
     transition-property: width;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-uz58fau {
+  @keyframes jkl-downcount-udz45ax {
     from {
       width: 100%;
     }
@@ -4207,12 +3861,12 @@
 }
 .jkl-select--beta {
   --border-color: var(--jkl-color-border-input);
-  --background-color: transparent;
+  --background-color: var(transparent);
   --color: var(--jkl-color-text-default);
   --box-shadow: 0 0 0 jkl.rem(1px) transparent;
   --border-width: 0.0625rem;
   --button-padding: calc(var(--jkl-unit-15) - var(--border-width));
-  --arrow-right: calc(var(--jkl-unit-base) * 0.25);
+  --arrow-right: var(--jkl-unit-02);
   display: block;
   position: relative;
 }
@@ -4285,12 +3939,9 @@
   outline: none;
 }
 .jkl-select--beta select {
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  font-size: var(--jkl-font-size-3);
-  line-height: var(--jkl-line-height-tight);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-productive);
+  font: var(--jkl-text-style-text-medium);
 }
 html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:focus-visible, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible) {
   outline: 3px solid var(--jkl-color-border-action);
@@ -4313,10 +3964,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   --border-width: 1px;
   --border: var(--border-width) solid var(--jkl-color-border-input);
   width: 100%;
-  font-size: var(--jkl-font-size-3);
-  line-height: var(--jkl-line-height-tight);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
+  font: var(--jkl-text-style-text-medium);
 }
 .jkl-search input[type=search] {
   appearance: none;
@@ -4346,10 +3994,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
 }
 .jkl-search input[type=search] {
-  font-size: var(--jkl-font-size-3);
-  line-height: var(--jkl-line-height-tight);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
+  font: var(--jkl-text-style-text-medium);
 }
 .jkl-search input[type=search]::-webkit-search-cancel-button, .jkl-search input[type=search]::-webkit-calendar-picker-indicator, .jkl-search input[type=search]::-webkit-search-results-button {
   appearance: none;
@@ -4403,16 +4048,16 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   grid-column: 1;
   z-index: 1;
   font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
-  font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
+  font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
   font-feature-settings: "liga";
   -webkit-font-feature-settings: "liga";
   font-size: 1.3em;
-  font-weight: var(--jkl-icon-weight, 300);
+  font-weight: 400;
   line-height: 1;
   display: inline-block;
   -webkit-font-smoothing: antialiased;
-  transition-timing-function: ease;
-  transition-duration: 75ms;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-energetic);
   transition-property: font-variation-settings, transform;
 }
 .jkl-search .clear-button::after {
@@ -4423,8 +4068,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   background-color: var(--jkl-color-text-default);
   opacity: 0;
   border-radius: inherit;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: opacity;
 }
 .jkl-search .clear-button:hover::after {
@@ -4461,8 +4106,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   inset: 0;
   inset-block: 20%;
   background-color: var(--jkl-color-border-separator);
-  transition-timing-function: ease;
-  transition-duration: 150ms;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: inset;
 }
 .jkl-search:has(button.jkl-search-submit) button.jkl-search-submit:hover::before {
@@ -4489,8 +4134,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     border-radius: 0;
     margin-inline-end: calc(var(--jkl-segmented-control-border-width) * -1);
     margin-block-end: 0.5lh;
-    transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
-    transition-duration: 250ms;
+    transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
+    transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: border background;
   }
   .jkl-segmented-control .jkl-segmented-control-item label {
@@ -4538,10 +4183,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     flex-direction: column;
     overflow-wrap: anywhere;
     width: 100%;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-summary-table tr {
     display: flex;
@@ -4563,7 +4205,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     padding-right: 0;
   }
   .jkl-summary-table > tbody th {
-    font-weight: 400;
+    font-weight: var(--jkl-font-weight-normal);
   }
   .jkl-summary-table > tfoot {
     border-top: 0.0625rem solid var(--jkl-color-border-separator-strong);
@@ -4572,7 +4214,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-summary-table > tfoot th,
   .jkl-summary-table > tfoot td {
-    font-weight: var(--jkl-typography-weight-bold);
+    font-weight: var(--jkl-font-weight-bold);
   }
 }
 @layer jokul.components {
@@ -4615,10 +4257,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     }
   }
   .jkl-system-message__message {
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
     margin: var(--jkl-system-message-message-margin);
   }
   .jkl-system-message__dismiss-button {
@@ -4700,8 +4339,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-uz58fbx 400ms forwards;
-    transition: block 400ms 400ms;
+    animation: jkl-dismiss-udz45ci var(--jkl-motion-timing-lazy) forwards;
+    transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
     --background-color: var(--jkl-color-background-alert-info);
@@ -4730,7 +4369,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-uz58fbx {
+  @keyframes jkl-dismiss-udz45ci {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -4767,10 +4406,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     position: relative;
     text-align: left;
     vertical-align: top;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
   }
   .jkl-table-cell:has(.jkl-button) {
     --jkl-table-cell-padding: var(--jkl-unit-05);
@@ -4805,19 +4441,13 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     .jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text)::before {
       content: attr(data-th);
       display: block;
-      font-size: var(--jkl-font-size-4);
-      line-height: var(--jkl-line-height-tight);
-      font-weight: 700;
-      --jkl-icon-weight: 400;
+      font: var(--jkl-text-style-heading-5);
     }
   }
   .jkl-table--collapse-to-list[data-collapse] .jkl-table-cell:not(.jkl-table-cell--expand-without-text)::before {
     content: attr(data-th);
     display: block;
-    font-size: var(--jkl-font-size-4);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 700;
-    --jkl-icon-weight: 400;
+    font: var(--jkl-text-style-heading-5);
   }
   @media (min-width: 680px) {
     .jkl-table--collapse-to-list:not([data-collapse]) .jkl-table-cell--expand-without-text .jkl-expand-button__text {
@@ -4837,22 +4467,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
 }
 @layer jokul.components {
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --jkl-table-head-sticky-color: var(--jkl-background-color);
-    }
-  }
-  [data-theme=light] {
-    --jkl-table-head-sticky-color: var(--jkl-background-color);
-  }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --jkl-table-head-sticky-color: var(--jkl-background-color);
-    }
-  }
-  [data-theme=dark] {
-    --jkl-table-head-sticky-color: var(--jkl-background-color);
-  }
   .jkl-table-head--sr-only {
     border: 0 !important;
     clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
@@ -4869,9 +4483,9 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     position: sticky;
     top: var(--jkl-table-head-sticky-offset, 0);
     z-index: 1;
-    background-color: var(--jkl-table-head-sticky-color);
+    background-color: var(--jkl-table-head-sticky-color, var(--jkl-color-background-page));
     border-bottom: none;
-    box-shadow: inset 0 0 0 #000, inset 0 -0.0625rem 0 var(--jkl-color-border-separator-strong);
+    box-shadow: inset 0 0 0 #000, inset 0 var(--jkl-border-width-1) 0 var(--jkl-color-border-separator-strong);
     background-clip: padding-box;
     vertical-align: bottom;
     height: 2.3em;
@@ -4881,11 +4495,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   .jkl-table-header {
     --jkl-table-header-padding-inline: var(--jkl-unit-15);
     --jkl-table-header-padding-block: var(--jkl-unit-10);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    font-weight: 700;
+    font: var(--jkl-text-style-text-small);
+    font-weight: var(--jkl-font-weight-bold);
     padding-block: var(--jkl-table-header-padding-block);
     padding-inline: var(--jkl-table-header-padding-inline);
     text-align: left;
@@ -4898,7 +4509,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     text-align: right;
   }
   .jkl-table-header--bold {
-    font-weight: var(--jkl-typography-weight-bold);
+    font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-table-header__arrows {
     display: flex;
@@ -4970,7 +4581,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     flex-direction: column;
     justify-content: center;
     flex-wrap: wrap;
-    gap: calc(var(--jkl-unit-base) * 2);
+    gap: var(--jkl-unit-20);
   }
   @media (min-width: 680px) {
     .jkl-table-pagination__nav {
@@ -5038,7 +4649,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-table-pagination__page--active {
     --jkl-icon-weight: 400;
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
     letter-spacing: -0.014em;
   }
 }
@@ -5099,8 +4710,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable {
     transition-property: border, padding;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
   }
   .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable.jkl-table-row--expanded {
     border-bottom-color: var(--jkl-table-row-border-none-color);
@@ -5119,8 +4730,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable + tr .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable {
     transition-property: border;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
   }
   .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable + [aria-hidden=false] .jkl-table-row {
     border-top-color: var(--jkl-table-row-border-none-color);
@@ -5180,13 +4791,13 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-expandable-table-row__expanded-row {
     display: none;
-    transition-timing-function: ease-in;
-    transition-duration: 250ms;
+    transition-timing-function: var(--jkl-motion-easing-exit);
+    transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: height;
   }
   .jkl-expandable-table-row__expanded-row--expanded {
-    transition-timing-function: ease-out;
-    transition-duration: 400ms;
+    transition-timing-function: var(--jkl-motion-easing-entrance);
+    transition-duration: var(--jkl-motion-timing-lazy);
     display: block;
   }
 }
@@ -5256,11 +4867,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-table-of-contents .jkl-table-of-contents-title {
     margin-block-end: var(--jkl-unit-05);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-table-of-contents .jkl-table-of-contents-item {
     display: flex;
@@ -5312,8 +4919,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   .jkl-table-of-contents ol .jkl-table-of-contents-link {
     padding-inline-end: var(--jkl-unit-20);
     padding-block: var(--ordered-item-padding);
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color;
   }
   .jkl-table-of-contents ol .jkl-table-of-contents-link::before {
@@ -5362,16 +4969,13 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       inset-block-start: calc(anchor(end) - 2px);
       inset-inline-start: calc(anchor(--active-tab start));
       background-color: var(--indicator-color);
-      transition-timing-function: ease;
-      transition-duration: 400ms;
+      transition-timing-function: var(--jkl-motion-easing-standard);
+      transition-duration: var(--jkl-motion-timing-lazy);
     }
   }
   .jkl-tab {
     --padding-inline-end: var(--jkl-unit-50);
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-medium);
     color: var(--text-color);
     padding: var(--jkl-unit-10) var(--padding-inline-end) var(--jkl-unit-10) var(--jkl-unit-05);
     border: none;
@@ -5413,7 +5017,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   .jkl-tab[aria-selected=true] {
     anchor-name: --active-tab;
     --jkl-icon-weight: 400;
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
     letter-spacing: -0.014em;
   }
   @supports not (position-anchor: --active-tab) {
@@ -5428,8 +5032,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       inset-block-end: 0;
       inset-inline-start: 0;
       background-color: var(--indicator-color);
-      transition-timing-function: ease;
-      transition-duration: 400ms;
+      transition-timing-function: var(--jkl-motion-easing-standard);
+      transition-duration: var(--jkl-motion-timing-lazy);
     }
   }
 }
@@ -5471,10 +5075,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     width: clamp(15em, 100%, min(30rem, 85vw));
     padding: var(--jkl-toast-padding);
     position: relative;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-paragraph-medium);
   }
   .jkl-toast__progress {
     --bar-color: var(--text-color);
@@ -5505,10 +5106,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-top: var(--jkl-unit-15);
   }
   .jkl-toast__title {
-    font-size: var(--jkl-font-size-4);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 700;
-    --jkl-icon-weight: 400;
+    font: var(--jkl-text-style-heading-5);
   }
   .jkl-toast__dismiss-button {
     background-color: transparent;
@@ -5567,12 +5165,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-uz58fc9 200ms ease-out forwards;
+    animation: jkl-entering-udz45ct var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uz58fcr 150ms ease-in forwards;
+    animation: jkl-exiting-udz45db var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-uz58fc9 {
+  @keyframes jkl-entering-udz45ct {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5582,7 +5180,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uz58fcr {
+  @keyframes jkl-exiting-udz45db {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -6963,7 +6561,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   box-shadow: inset 0 0 0 0.125rem var(--jkl-slider-focus-color);
 }
 .jkl-toggle-slider__legend {
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--jkl-spacing-8);
   font-size: var(--jkl-slider-legend-font-size);
   line-height: var(--jkl-slider-legend-line-height);
   font-weight: var(--jkl-slider-legend-font-weight);
@@ -7009,7 +6607,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
 }
 .jkl-toggle-slider__label--selected {
   --jkl-icon-weight: 400;
-  font-weight: 700;
+  font-weight: var(--jkl-font-weight-bold);
   letter-spacing: -0.014em;
   color: var(--jkl-slider-pill-text--active);
 }
@@ -7019,8 +6617,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   position: absolute;
   transition-property: width, transform;
   border-radius: 6.25rem;
-  transition-timing-function: ease;
-  transition-duration: 250ms;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-expressive);
 }
 @media (min-width: 680px) {
   .jkl-toggle-slider {
@@ -7064,10 +6662,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   align-items: center;
   gap: var(--jkl-unit-10);
   touch-action: none;
-  font-size: var(--jkl-font-size-3);
-  line-height: var(--jkl-line-height-tight);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
+  font: var(--jkl-text-style-text-medium);
 }
 .jkl-toggle-switch {
   outline: 0;
@@ -7151,8 +6746,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   width: var(--jkl-toggle-switch-knob-size);
   color: var(--icon-color);
   font-size: var(--jkl-font-size-1);
-  transition-timing-function: ease;
-  transition-duration: 150ms;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: translate;
   translate: var(--knob-position);
 }