@fremtind/jokul 5.0.0-next.0 → 5.0.0-next.2

package/styles/components/cookie-consent/cookie-consent.css

@@ -16,11 +16,7 @@
     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);

package/styles/components/cookie-consent/cookie-consent.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-cookie-consent-modal{position:fixed;z-index:9000!important}.jkl-cookie-consent-modal[aria-hidden=true]{display:none}.jkl-cookie-consent-modal>.jkl-cookie-consent-modal__overlay{background:rgba(0,0,0,.3);inset:0;position:fixed;transition:.2s}.jkl-cookie-consent-modal__info-text{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);--jkl-icon-weight:300;--jkl-icon-size:1.2em}.jkl-cookie-consent-modal__checkbox{margin-bottom:var(--jkl-unit-10);margin-top:var(--jkl-unit-30)}}
+@layer jokul.components{.jkl-cookie-consent-modal{position:fixed;z-index:9000!important}.jkl-cookie-consent-modal[aria-hidden=true]{display:none}.jkl-cookie-consent-modal>.jkl-cookie-consent-modal__overlay{background:rgba(0,0,0,.3);inset:0;position:fixed;transition:.2s}.jkl-cookie-consent-modal__info-text{font:var(--jkl-text-style-paragraph-small)}.jkl-cookie-consent-modal__checkbox{margin-bottom:var(--jkl-unit-10);margin-top:var(--jkl-unit-30)}}

package/styles/components/cookie-consent/cookie-consent.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@use "../../core/jkl";
+@use "../../jkl";
 
 $_card-corner-radius: jkl.rem(2px);
 $_container-width: jkl.rem(660px);

package/styles/components/countdown/countdown.css

@@ -3,8 +3,8 @@
  */
 @layer jokul.components {
   .jkl-countdown {
-    --track-color: var(--jkl-color-border-separator);
-    --bar-color: var(--jkl-color-border-input-focus);
+    --track-color: var(--jkl-color-border-subdued);
+    --bar-color: var(--jkl-color-border-strong);
     --bar-height: 0.25rem;
     background-color: var(--track-color);
     border-radius: 6.25rem;
@@ -26,10 +26,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-u57v9wq var(--duration) linear forwards;
+    animation: jkl-downcount-uk2bqdz var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-u57v9wq {
+  @keyframes jkl-downcount-uk2bqdz {
     from {
       width: 100%;
     }

package/styles/components/countdown/countdown.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-u57v9wq var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-u57v9wq{0%{width:100%}to{width:0}}}
+@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-uk2bqdz var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-uk2bqdz{0%{width:100%}to{width:0}}}

package/styles/components/datepicker/_calendar-date-button.scss

@@ -1,14 +1,14 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
-    // Custom tweaks for iPhone SE
-    @include jkl.screen-to(375px) {
-        --jkl-calendar-date-size: var(--jkl-unit-40);
-    }
-
     .jkl-calendar-date-button {
         --jkl-calendar-date-size: var(--jkl-unit-50);
 
+        // Custom tweaks for iPhone SE
+        @include jkl.screen-to(375px) {
+            --jkl-calendar-date-size: var(--jkl-unit-40);
+        }
+
         @include jkl.text-style("text-small");
 
         appearance: none;
@@ -41,7 +41,7 @@
         }
 
         &[aria-current="date"] {
-            font-weight: jkl.$typography-weight-bold;
+            font-weight: jkl.$font-weight-bold;
         }
 
         // Other dates
@@ -52,8 +52,8 @@
 
         // Selected date
         &[aria-pressed="true"] {
-            background-color: var(--jkl-color-background-container-inverted);
-            color: var(--jkl-color-text-inverted);
+            background-color: var(--jkl-color-background-action);
+            color: var(--jkl-color-text-on-action);
             cursor: pointer;
 
             &:hover {

package/styles/components/datepicker/_calendar-navigation-dropdown.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-calendar-navigation-dropdown {
@@ -16,7 +16,7 @@
             appearance: none;
 
             @include jkl.text-style("text-small") {
-                font-weight: jkl.$typography-weight-bold;
+                font-weight: jkl.$font-weight-bold;
             }
 
             background-color: transparent;
@@ -34,7 +34,7 @@
 
             & option {
                 color: var(--jkl-color-text-default);
-                background-color: var(--jkl-color-background-container-high);
+                background-color: var(--jkl-color-background-container);
                 text-align: left;
             }
 

package/styles/components/datepicker/_calendar-navigation.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-calendar-navigation {

package/styles/components/datepicker/_calendar-table.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-calendar-table {

package/styles/components/datepicker/_calendar.scss

@@ -1,18 +1,17 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
-
-    // Custom tweaks for iPhone SE
-    @include jkl.screen-to(375px) {
-        --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);
 
+        // Custom tweaks for iPhone SE
+        @include jkl.screen-to(375px) {
+            --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20);
+        }
+
         display: block;
-        background-color: var(--jkl-color-background-container-high);
+        background-color: var(--jkl-color-background-container);
         color: var(--jkl-color);
 
         &__padding {

package/styles/components/datepicker/datepicker.css

@@ -2,14 +2,18 @@
  * Do not edit directly, this file was auto-generated.
  */
 @layer jokul.components {
-  @media (width >= 0) and (max-width: 374px) {
-    --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);
+  }
+  @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 {
     display: block;
-    background-color: var(--jkl-color-background-container-high);
+    background-color: var(--jkl-color-background-container);
     color: var(--jkl-color);
   }
   .jkl-calendar__padding {
@@ -47,11 +51,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;
@@ -85,11 +86,11 @@
   }
   .jkl-calendar-navigation-dropdown__select option {
     color: var(--jkl-color-text-default);
-    background-color: var(--jkl-color-background-container-high);
+    background-color: var(--jkl-color-background-container);
     text-align: left;
   }
   .jkl-calendar-navigation-dropdown__select:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-calendar-navigation-dropdown__chevron {
@@ -102,10 +103,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 {
@@ -120,15 +118,16 @@
   }
 }
 @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-size: var(--jkl-unit-40);
+    .jkl-calendar-date-button {
+      --jkl-calendar-date-size: var(--jkl-unit-40);
+    }
   }
   .jkl-calendar-date-button {
-    --jkl-calendar-date-size: var(--jkl-unit-50);
-    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);
     appearance: none;
     position: relative;
     box-sizing: border-box;
@@ -143,8 +142,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 {
@@ -168,23 +167,20 @@
     }
   }
   .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);
     cursor: pointer;
   }
   .jkl-calendar-date-button[aria-pressed=true] {
-    background-color: var(--jkl-color-background-container-inverted);
-    color: var(--jkl-color-text-inverted);
+    background-color: var(--jkl-color-background-action);
+    color: var(--jkl-color-text-on-action);
     cursor: pointer;
   }
   .jkl-calendar-date-button[aria-pressed=true]:hover {
@@ -194,7 +190,7 @@
     color: color(from var(--jkl-color-text-subdued) srgb r g b/70%);
   }
   .jkl-calendar-date-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
 }

package/styles/components/datepicker/datepicker.min.css

@@ -1 +1 @@
-@layer jokul.components{@media (width >= 0) and (max-width:374px){--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);background-color:var(--jkl-color-background-container-high);color:var(--jkl-color);display:block}.jkl-calendar__padding{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--jkl-calendar-gap)}@media screen and (forced-colors:active){.jkl-calendar__padding{border:1px solid CanvasText}}}@layer jokul.components{.jkl-calendar-navigation{align-items:center;border:0;box-sizing:border-box;display:flex;justify-content:space-between;margin:0;padding:0;width:100%}.jkl-calendar-navigation-dropdown{--chevron-size:1.5rem;align-items:center;display:inline-flex}}@layer jokul.components{.jkl-calendar-navigation-dropdown>*{cursor:pointer}.jkl-calendar-navigation-dropdown__select{-webkit-appearance:none;appearance:none;font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;background-color:transparent;border:none;border-radius:0;color:inherit;font-weight:700;height:2.5rem;margin:0;padding:0;text-align:end;text-align-last:end;-webkit-padding-end:var(--chevron-size);border-style:none;outline:0;outline-style:none;padding-inline-end:var(--chevron-size)}.jkl-calendar-navigation-dropdown__select:active,.jkl-calendar-navigation-dropdown__select:focus,.jkl-calendar-navigation-dropdown__select:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-calendar-navigation-dropdown__select{border-style:revert;outline:revert;outline-style:revert}.jkl-calendar-navigation-dropdown__select:active,.jkl-calendar-navigation-dropdown__select:focus,.jkl-calendar-navigation-dropdown__select:hover{outline:revert;outline-style:revert}}.jkl-calendar-navigation-dropdown__select option{background-color:var(--jkl-color-background-container-high);color:var(--jkl-color-text-default);text-align:left}.jkl-calendar-navigation-dropdown__select:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-calendar-navigation-dropdown__chevron{margin-left:calc(var(--chevron-size)*-1);pointer-events:none}.jkl-calendar-navigation-dropdown+.jkl-calendar-navigation-dropdown{-webkit-margin-start:var(--jkl-unit-10);margin-inline-start:var(--jkl-unit-10)}}@layer jokul.components{.jkl-calendar-table th{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;padding-bottom:var(--jkl-unit-10)}.jkl-calendar-table td{text-align:center}.jkl-calendar-table td+td,.jkl-calendar-table th+th{padding-left:calc(var(--jkl-unit-10)/2)}.jkl-calendar-table tr+tr>td{padding-top:calc(var(--jkl-unit-10)/2)}}@layer jokul.components{@media (width >= 0) and (max-width:374px){--jkl-calendar-date-size:var(--jkl-unit-40)}.jkl-calendar-date-button{--jkl-calendar-date-size:var(--jkl-unit-50);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;align-items:center;-webkit-appearance:none;appearance:none;background-color:transparent;border-radius:50%;border-style:none;box-sizing:border-box;color:var(--jkl-color);display:inline-flex;height:var(--jkl-calendar-date-size);justify-content:center;margin:var(--jkl-calendar-date-margin);outline:0;outline-style:none;padding:0;padding-top:var(--jkl-unit-02);position:relative;transition-duration:75ms;transition-property:color,background-color,box-shadow;transition-timing-function:ease-out;width:var(--jkl-calendar-date-size)}.jkl-calendar-date-button:active,.jkl-calendar-date-button:focus,.jkl-calendar-date-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-calendar-date-button{border-style:revert;outline:revert;outline-style:revert}.jkl-calendar-date-button:active,.jkl-calendar-date-button:focus,.jkl-calendar-date-button:hover{outline:revert;outline-style:revert}}.jkl-calendar-date-button[data-adjacent=true]{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--jkl-color-text-subdued);padding:0}.jkl-calendar-date-button[aria-current=date]{font-weight:700}.jkl-calendar-date-button:hover:not(:disabled){background-color:var(--jkl-color-background-interactive-hover);cursor:pointer}.jkl-calendar-date-button[aria-pressed=true]{background-color:var(--jkl-color-background-container-inverted);color:var(--jkl-color-text-inverted);cursor:pointer}.jkl-calendar-date-button[aria-pressed=true]:hover{color:var(--jkl-color)}.jkl-calendar-date-button:disabled{color:color(from var(--jkl-color-text-subdued) srgb r g b/70%)}.jkl-calendar-date-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}}@layer jokul.components{.jkl-datepicker{align-items:flex-start;border-style:none;display:flex;flex-direction:column;outline:0;outline-style:none;position:relative}.jkl-datepicker:active,.jkl-datepicker:focus,.jkl-datepicker:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-datepicker{border-style:revert;outline:revert;outline-style:revert}.jkl-datepicker:active,.jkl-datepicker:focus,.jkl-datepicker:hover{outline:revert;outline-style:revert}}.jkl-datepicker__input-wrapper{display:contents;position:relative}.jkl-datepicker .jkl-datepicker__input{padding-bottom:calc(var(--jkl-text-input-vertical-padding) - .08em);padding-top:calc(var(--jkl-text-input-vertical-padding) + .08em)}.jkl-datepicker__calendar-wrapper{left:0;position:absolute;top:calc(100% + .875rem);z-index:7000}@media (width >= 0) and (max-width:679px){.jkl-datepicker__calendar-wrapper{left:-1.15rem}}@media (width >= 0) and (max-width:374px){.jkl-datepicker__calendar-wrapper{left:-2.5rem}}}
+@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{background-color:var(--jkl-color-background-container);color:var(--jkl-color);display:block}.jkl-calendar__padding{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--jkl-calendar-gap)}@media screen and (forced-colors:active){.jkl-calendar__padding{border:1px solid CanvasText}}}@layer jokul.components{.jkl-calendar-navigation{align-items:center;border:0;box-sizing:border-box;display:flex;justify-content:space-between;margin:0;padding:0;width:100%}.jkl-calendar-navigation-dropdown{--chevron-size:1.5rem;align-items:center;display:inline-flex}}@layer jokul.components{.jkl-calendar-navigation-dropdown>*{cursor:pointer}.jkl-calendar-navigation-dropdown__select{-webkit-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;color:inherit;font:var(--jkl-text-style-text-small);font-weight:var(--jkl-font-weight-bold);height:2.5rem;margin:0;padding:0;text-align:end;text-align-last:end;-webkit-padding-end:var(--chevron-size);border-style:none;outline:0;outline-style:none;padding-inline-end:var(--chevron-size)}.jkl-calendar-navigation-dropdown__select:active,.jkl-calendar-navigation-dropdown__select:focus,.jkl-calendar-navigation-dropdown__select:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-calendar-navigation-dropdown__select{border-style:revert;outline:revert;outline-style:revert}.jkl-calendar-navigation-dropdown__select:active,.jkl-calendar-navigation-dropdown__select:focus,.jkl-calendar-navigation-dropdown__select:hover{outline:revert;outline-style:revert}}.jkl-calendar-navigation-dropdown__select option{background-color:var(--jkl-color-background-container);color:var(--jkl-color-text-default);text-align:left}.jkl-calendar-navigation-dropdown__select:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-calendar-navigation-dropdown__chevron{margin-left:calc(var(--chevron-size)*-1);pointer-events:none}.jkl-calendar-navigation-dropdown+.jkl-calendar-navigation-dropdown{-webkit-margin-start:var(--jkl-unit-10);margin-inline-start:var(--jkl-unit-10)}}@layer jokul.components{.jkl-calendar-table th{font:var(--jkl-text-style-text-small);padding-bottom:var(--jkl-unit-10)}.jkl-calendar-table td{text-align:center}.jkl-calendar-table td+td,.jkl-calendar-table th+th{padding-left:calc(var(--jkl-unit-10)/2)}.jkl-calendar-table tr+tr>td{padding-top:calc(var(--jkl-unit-10)/2)}}@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-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:transparent;border-radius:50%;border-style:none;box-sizing:border-box;color:var(--jkl-color);display:inline-flex;font:var(--jkl-text-style-text-small);height:var(--jkl-calendar-date-size);justify-content:center;margin:var(--jkl-calendar-date-margin);outline:0;outline-style:none;padding:0;padding-top:var(--jkl-unit-02);position:relative;transition-duration:var(--jkl-motion-timing-energetic);transition-property:color,background-color,box-shadow;transition-timing-function:var(--jkl-motion-easing-entrance);width:var(--jkl-calendar-date-size)}.jkl-calendar-date-button:active,.jkl-calendar-date-button:focus,.jkl-calendar-date-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-calendar-date-button{border-style:revert;outline:revert;outline-style:revert}.jkl-calendar-date-button:active,.jkl-calendar-date-button:focus,.jkl-calendar-date-button:hover{outline:revert;outline-style:revert}}.jkl-calendar-date-button[data-adjacent=true]{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-text-small);padding:0}.jkl-calendar-date-button[aria-current=date]{font-weight:var(--jkl-font-weight-bold)}.jkl-calendar-date-button:hover:not(:disabled){background-color:var(--jkl-color-background-interactive-hover);cursor:pointer}.jkl-calendar-date-button[aria-pressed=true]{background-color:var(--jkl-color-background-action);color:var(--jkl-color-text-on-action);cursor:pointer}.jkl-calendar-date-button[aria-pressed=true]:hover{color:var(--jkl-color)}.jkl-calendar-date-button:disabled{color:color(from var(--jkl-color-text-subdued) srgb r g b/70%)}.jkl-calendar-date-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}@layer jokul.components{.jkl-datepicker{align-items:flex-start;border-style:none;display:flex;flex-direction:column;outline:0;outline-style:none;position:relative}.jkl-datepicker:active,.jkl-datepicker:focus,.jkl-datepicker:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-datepicker{border-style:revert;outline:revert;outline-style:revert}.jkl-datepicker:active,.jkl-datepicker:focus,.jkl-datepicker:hover{outline:revert;outline-style:revert}}.jkl-datepicker__input-wrapper{display:contents;position:relative}.jkl-datepicker .jkl-datepicker__input{padding-bottom:calc(var(--jkl-text-input-vertical-padding) - .08em);padding-top:calc(var(--jkl-text-input-vertical-padding) + .08em)}.jkl-datepicker__calendar-wrapper{left:0;position:absolute;top:calc(100% + .875rem);z-index:7000}@media (width >= 0) and (max-width:679px){.jkl-datepicker__calendar-wrapper{left:-1.15rem}}@media (width >= 0) and (max-width:374px){.jkl-datepicker__calendar-wrapper{left:-2.5rem}}}

package/styles/components/datepicker/datepicker.scss

@@ -4,7 +4,7 @@
 @use "calendar-navigation-dropdown";
 @use "calendar-table";
 @use "calendar-date-button";
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-datepicker {

package/styles/components/description-list/description-list.css

@@ -20,7 +20,7 @@
     display: unset;
   }
   .jkl-description-list__term {
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-description-list__detail {
     margin-left: 0;
@@ -58,6 +58,6 @@
   }
   .jkl-description-list[data-separators=true] .seperator:not(:first-of-type) {
     margin-block: var(--jkl-unit-15);
-    border-top: 1px solid var(--jkl-color-border-separator);
+    border-top: 1px solid var(--jkl-color-border-subdued);
   }
 }

package/styles/components/description-list/description-list.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-description-list{display:grid;grid-template-columns:1fr;row-gap:var(--jkl-unit-05)}.jkl-description-list .seperator{display:none}.jkl-description-list__detail+.seperator{border:0 solid transparent;grid-column:1/-1;margin-block:var(--jkl-unit-05);width:100%}.jkl-description-list__detail+.seperator:not(:first-of-type){display:unset}.jkl-description-list__term{font-weight:700}.jkl-description-list__detail{margin-left:0}@media (min-width:60ch){.jkl-description-list[data-alignment=horizontal]{column-gap:1.5em;grid-auto-flow:column;grid-template-columns:fit-content(40%) 1fr}.jkl-description-list[data-alignment=horizontal] .jkl-description-list__term{grid-column-start:1;margin:0;overflow-wrap:break-word}.jkl-description-list[data-alignment=horizontal] .jkl-description-list__detail{grid-column-start:2}.jkl-description-list[data-alignment=justified]{column-gap:1.5em;grid-auto-flow:column;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.jkl-description-list[data-alignment=justified] .jkl-description-list__term{grid-column-start:1;margin:0;overflow-wrap:break-word}.jkl-description-list[data-alignment=justified] .jkl-description-list__detail{grid-column-start:2}.jkl-description-list[data-alignment=justified] .jkl-description-list__detail{text-align:end}}.jkl-description-list[data-separators=true] .seperator:not(:first-of-type){border-top:1px solid var(--jkl-color-border-separator);margin-block:var(--jkl-unit-15)}}
+@layer jokul.components{.jkl-description-list{display:grid;grid-template-columns:1fr;row-gap:var(--jkl-unit-05)}.jkl-description-list .seperator{display:none}.jkl-description-list__detail+.seperator{border:0 solid transparent;grid-column:1/-1;margin-block:var(--jkl-unit-05);width:100%}.jkl-description-list__detail+.seperator:not(:first-of-type){display:unset}.jkl-description-list__term{font-weight:var(--jkl-font-weight-bold)}.jkl-description-list__detail{margin-left:0}@media (min-width:60ch){.jkl-description-list[data-alignment=horizontal]{column-gap:1.5em;grid-auto-flow:column;grid-template-columns:fit-content(40%) 1fr}.jkl-description-list[data-alignment=horizontal] .jkl-description-list__term{grid-column-start:1;margin:0;overflow-wrap:break-word}.jkl-description-list[data-alignment=horizontal] .jkl-description-list__detail{grid-column-start:2}.jkl-description-list[data-alignment=justified]{column-gap:1.5em;grid-auto-flow:column;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.jkl-description-list[data-alignment=justified] .jkl-description-list__term{grid-column-start:1;margin:0;overflow-wrap:break-word}.jkl-description-list[data-alignment=justified] .jkl-description-list__detail{grid-column-start:2}.jkl-description-list[data-alignment=justified] .jkl-description-list__detail{text-align:end}}.jkl-description-list[data-separators=true] .seperator:not(:first-of-type){border-top:1px solid var(--jkl-color-border-subdued);margin-block:var(--jkl-unit-15)}}

package/styles/components/description-list/description-list.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@use "../../core/jkl";
+@use "../../jkl";
 
 @mixin _horizontal-list {
     .jkl-description-list__term {
@@ -37,7 +37,7 @@
         }
 
         &__term {
-            font-weight: jkl.$typography-weight-bold;
+            font-weight: jkl.$font-weight-bold;
         }
 
         &__detail {
@@ -69,7 +69,7 @@
         &[data-separators="true"] {
             .seperator:not(:first-of-type) {
                 margin-block: var(--jkl-unit-15);
-                border-top: 1px solid var(--jkl-color-border-separator);
+                border-top: 1px solid var(--jkl-color-border-subdued);
             }
         }
     }

package/styles/components/expander/expandable.css

@@ -3,7 +3,7 @@
  */
 @layer jokul.components {
   .jkl-expandable {
-    background-color: var(--jkl-color-background-container-low);
+    background-color: var(--jkl-color-background-page);
     border: 1px solid transparent;
     border-radius: var(--border-radius);
     box-sizing: border-box;
@@ -23,7 +23,7 @@
     padding: var(--jkl-unit-20);
   }
   .jkl-expandable--stroke {
-    border-color: var(--jkl-color-border-separator);
+    border-color: var(--jkl-color-border-subdued);
     background-color: transparent;
     border-radius: 0;
     border-radius: var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius);
@@ -31,34 +31,34 @@
   .jkl-expandable__wrapper {
     --border-radius: 0.25rem;
     --outline-offset: 3px;
+    --stroke-outline-offset: 3px;
+    --border-top-left-radius: var(--border-radius);
+    --border-top-right-radius: var(--border-radius);
+    --border-bottom-left-radius: var(--border-radius);
+    --border-bottom-right-radius: var(--border-radius);
+    position: relative;
+  }
+  .jkl-expandable__wrapper + .jkl-expandable__wrapper {
     --border-top-left-radius: 0;
     --border-top-right-radius: 0;
-    --border-bottom-left-radius: 0;
-    --border-bottom-right-radius: 0;
-    position: relative;
+    --stroke-outline-offset: -1px;
   }
   .jkl-expandable__wrapper + .jkl-expandable__wrapper .jkl-expandable--stroke {
     border-top: none;
   }
-  .jkl-expandable__wrapper:first-child {
-    --border-top-left-radius: var(--border-radius);
-    --border-top-right-radius: var(--border-radius);
-  }
-  .jkl-expandable__wrapper:last-child {
-    --border-bottom-left-radius: var(--border-radius);
-    --border-bottom-right-radius: var(--border-radius);
+  .jkl-expandable__wrapper:has(+ .jkl-expandable__wrapper) {
+    --border-bottom-left-radius: 0;
+    --border-bottom-right-radius: 0;
+    --stroke-outline-offset: -1px;
   }
   .jkl-expandable__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable--stroke) {
-    --outline-offset: -1px;
+    --outline-offset: var(--stroke-outline-offset);
   }
   .jkl-expandable__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable__focus-container {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
     outline-offset: var(--outline-offset);
   }
-  .jkl-expandable__wrapper:has(:focus-visible):first-child:last-child {
-    --outline-offset: 3px;
-  }
   .jkl-expandable__focus-container {
     border-radius: var(--border-radius);
     position: absolute;
@@ -94,13 +94,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 {

package/styles/components/expander/expandable.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-expandable{background-color:var(--jkl-color-background-container-low);border:1px solid transparent;border-radius:var(--border-radius);box-sizing:border-box;overflow:hidden;width:100%}.jkl-expandable__content[data-expanded=true]{height:auto}.jkl-expandable__content[data-expanded=false]{height:0}.jkl-expandable[data-visible-content=true] .jkl-expander{border-bottom:1px solid transparent}.jkl-expandable__content-wrapper{padding:var(--jkl-unit-20)}.jkl-expandable--stroke{background-color:transparent;border-color:var(--jkl-color-border-separator);border-radius:0;border-radius:var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius)}.jkl-expandable__wrapper{--border-radius:0.25rem;--outline-offset:3px;--border-top-left-radius:0;--border-top-right-radius:0;--border-bottom-left-radius:0;--border-bottom-right-radius:0;position:relative}.jkl-expandable__wrapper+.jkl-expandable__wrapper .jkl-expandable--stroke{border-top:none}.jkl-expandable__wrapper:first-child{--border-top-left-radius:var(--border-radius);--border-top-right-radius:var(--border-radius)}.jkl-expandable__wrapper:last-child{--border-bottom-left-radius:var(--border-radius);--border-bottom-right-radius:var(--border-radius)}.jkl-expandable__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable--stroke){--outline-offset:-1px}.jkl-expandable__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable__focus-container{outline:3px solid var(--jkl-color-border-action);outline-offset:3px;outline-offset:var(--outline-offset)}.jkl-expandable__wrapper:has(:focus-visible):first-child:last-child{--outline-offset:3px}.jkl-expandable__focus-container{border-radius:var(--border-radius);inset:0;position:absolute}.jkl-expander{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:none;box-sizing:border-box;color:var(--jkl-color);cursor:pointer;display:flex;gap:.5rem;list-style:none;padding:var(--jkl-unit-20);text-align:left;width:100%}.jkl-expander::-webkit-details-marker{display:none}.jkl-expander__label{flex-grow:1}.jkl-expander__chevron{text-align:right;transform:rotate(0turn);transition-property:transform;-webkit-user-select:none;user-select:none}.jkl-expander--open .jkl-expander__label{--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}.jkl-expander--open .jkl-expander__chevron{transform:rotate(-.5turn);transition-duration:.1s;transition-timing-function:ease}@media (hover:hover){.jkl-expander:hover{background-color:var(--jkl-color-background-interactive-selected)}}.jkl-expander{border-style:none;outline:0;outline-style:none}.jkl-expander:active,.jkl-expander:focus,.jkl-expander:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-expander{border-style:revert;outline:revert;outline-style:revert}.jkl-expander:active,.jkl-expander:focus,.jkl-expander:hover{outline:revert;outline-style:revert}}}
+@layer jokul.components{.jkl-expandable{background-color:var(--jkl-color-background-page);border:1px solid transparent;border-radius:var(--border-radius);box-sizing:border-box;overflow:hidden;width:100%}.jkl-expandable__content[data-expanded=true]{height:auto}.jkl-expandable__content[data-expanded=false]{height:0}.jkl-expandable[data-visible-content=true] .jkl-expander{border-bottom:1px solid transparent}.jkl-expandable__content-wrapper{padding:var(--jkl-unit-20)}.jkl-expandable--stroke{background-color:transparent;border-color:var(--jkl-color-border-subdued);border-radius:0;border-radius:var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius)}.jkl-expandable__wrapper{--border-radius:0.25rem;--outline-offset:3px;--stroke-outline-offset:3px;--border-top-left-radius:var(--border-radius);--border-top-right-radius:var(--border-radius);--border-bottom-left-radius:var(--border-radius);--border-bottom-right-radius:var(--border-radius);position:relative}.jkl-expandable__wrapper+.jkl-expandable__wrapper{--border-top-left-radius:0;--border-top-right-radius:0;--stroke-outline-offset:-1px}.jkl-expandable__wrapper+.jkl-expandable__wrapper .jkl-expandable--stroke{border-top:none}.jkl-expandable__wrapper:has(+.jkl-expandable__wrapper){--border-bottom-left-radius:0;--border-bottom-right-radius:0;--stroke-outline-offset:-1px}.jkl-expandable__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable--stroke){--outline-offset:var(--stroke-outline-offset)}.jkl-expandable__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable__focus-container{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px;outline-offset:var(--outline-offset)}.jkl-expandable__focus-container{border-radius:var(--border-radius);inset:0;position:absolute}.jkl-expander{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:none;box-sizing:border-box;color:var(--jkl-color);cursor:pointer;display:flex;gap:.5rem;list-style:none;padding:var(--jkl-unit-20);text-align:left;width:100%}.jkl-expander::-webkit-details-marker{display:none}.jkl-expander__label{flex-grow:1}.jkl-expander__chevron{text-align:right;transform:rotate(0turn);transition-property:transform;-webkit-user-select:none;user-select:none}.jkl-expander--open .jkl-expander__label{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-expander--open .jkl-expander__chevron{transform:rotate(-.5turn);transition-duration:var(--jkl-motion-timing-snappy);transition-timing-function:var(--jkl-motion-easing-standard)}@media (hover:hover){.jkl-expander:hover{background-color:var(--jkl-color-background-interactive-selected)}}.jkl-expander{border-style:none;outline:0;outline-style:none}.jkl-expander:active,.jkl-expander:focus,.jkl-expander:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-expander{border-style:revert;outline:revert;outline-style:revert}.jkl-expander:active,.jkl-expander:focus,.jkl-expander:hover{outline:revert;outline-style:revert}}}

package/styles/components/expander/expandable.scss

@@ -1,8 +1,8 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-expandable {
-        background-color: var(--jkl-color-background-container-low);
+        background-color: var(--jkl-color-background-page);
         // A transparent border will be visible in forced colors mode and replace
         // the role of the background-color in separating the component from other content
         border: 1px solid transparent;
@@ -28,7 +28,7 @@
         }
 
         &--stroke {
-            border-color: var(--jkl-color-border-separator);
+            border-color: var(--jkl-color-border-subdued);
             background-color: transparent;
 
             border-radius: 0;
@@ -38,14 +38,18 @@
         &__wrapper {
             --border-radius: #{jkl.rem(4px)};
             --outline-offset: 3px;
-            --border-top-left-radius: 0;
-            --border-top-right-radius: 0;
-            --border-bottom-left-radius: 0;
-            --border-bottom-right-radius: 0;
+            --stroke-outline-offset: 3px;
+            --border-top-left-radius: var(--border-radius);
+            --border-top-right-radius: var(--border-radius);
+            --border-bottom-left-radius: var(--border-radius);
+            --border-bottom-right-radius: var(--border-radius);
 
             position: relative;
 
             & + & {
+                --border-top-left-radius: 0;
+                --border-top-right-radius: 0;
+                --stroke-outline-offset: -1px;
 
                 // Matches every expandable that follows directly after another
                 .jkl-expandable--stroke {
@@ -53,19 +57,15 @@
                 }
             }
 
-            &:first-child {
-                --border-top-left-radius: var(--border-radius);
-                --border-top-right-radius: var(--border-radius);
-            }
-
-            &:last-child {
-                --border-bottom-left-radius: var(--border-radius);
-                --border-bottom-right-radius: var(--border-radius);
+            &:has(+ &) {
+                --border-bottom-left-radius: 0;
+                --border-bottom-right-radius: 0;
+                --stroke-outline-offset: -1px;
             }
 
             &:has(.jkl-expander:focus-visible) {
                 &:has(.jkl-expandable--stroke) {
-                    --outline-offset: -1px;
+                    --outline-offset: var(--stroke-outline-offset);
                 }
 
                 .jkl-expandable__focus-container {
@@ -73,10 +73,6 @@
                     outline-offset: var(--outline-offset);
                 }
             }
-
-            &:has(:focus-visible):first-child:last-child {
-                --outline-offset: 3px;
-            }
         }
 
         &__focus-container {

package/styles/components/feedback/feedback.css

@@ -8,8 +8,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;
@@ -17,19 +17,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-uwcgwni 0.25s ease-out;
+    animation: jkl-show-u6m5oeh 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uwcgwni {
+  @keyframes jkl-show-u6m5oeh {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -42,7 +38,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;
@@ -52,8 +48,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) {
@@ -71,14 +67,10 @@
     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 {
-    inset: -0.125rem -0.125rem -0.125rem -0.125rem;
-    box-shadow: 0 0 0 0.125rem currentColor;
-  }
   .jkl-feedback-smiley-option::before {
     inset: 0;
     box-shadow: 0 0.125rem 1.875rem rgba(0, 0, 0, 0.1);
@@ -93,7 +85,9 @@
   input:checked + .jkl-feedback-smiley-option::before {
     opacity: 1;
   }
-  html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-feedback-smiley-option::after {
-    opacity: 1;
+  input:focus-visible + .jkl-feedback-smiley-option {
+    border-radius: var(--jkl-border-radius-full);
+    outline: 3px solid var(--jkl-color-border-strong);
+    outline-offset: 3px;
   }
 }