@fremtind/jokul 0.37.10 → 0.37.12

package/styles/components/checkbox/checkbox.scss

@@ -78,7 +78,6 @@ $_checkbox-indeterminate-animation-name: jkl-checkbox-indeterminate-#{string.uni
         // Position the hidden input so that Cypress can hit it without it being obscured by the visual checkbox
         top: -6px;
 
-        // Checked state:
         &:checked {
             + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
                 animation: $_checkbox-checked-animation-name
@@ -87,7 +86,6 @@ $_checkbox-indeterminate-animation-name: jkl-checkbox-indeterminate-#{string.uni
             }
         }
 
-        // Indeterminate state:
         &:indeterminate:not(:checked) {
             + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
                 animation: $_checkbox-indeterminate-animation-name
@@ -96,20 +94,21 @@ $_checkbox-indeterminate-animation-name: jkl-checkbox-indeterminate-#{string.uni
             }
         }
 
-        // Focused state:
         &:focus-visible + .jkl-checkbox__label {
             color: var(--jkl-checkbox-focus-color);
 
             & > .jkl-checkbox__mark {
-                --background-color: var(--jkl-color-background-input-focus);
                 @include jkl.focus-outline;
             }
         }
 
-        // Disabled state:
         &:disabled + .jkl-checkbox__label {
             color: var(--jkl-checkbox-disabled-color);
         }
+
+        &:active {
+            --background-color: var(--jkl-color-background-input-focus);
+        }
     }
 
     &__label {
@@ -125,10 +124,6 @@ $_checkbox-indeterminate-animation-name: jkl-checkbox-indeterminate-#{string.uni
                 outline: 1px solid var(--box-color);
             }
         }
-
-        &:active {
-            --background-color: var(--jkl-color-background-input-focus);
-        }
     }
 
     &__text {
@@ -152,7 +147,7 @@ $_checkbox-indeterminate-animation-name: jkl-checkbox-indeterminate-#{string.uni
         margin-block: calc(
             (var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size)) * 0.5
         );
-        margin-inline-end: var(--jkl-spacing-8);
+        margin-inline-end: var(--jkl-unit-10);
         align-self: flex-start;
         flex-shrink: 0; // Don't allow the mark to shrink in case of really long text
 
@@ -228,7 +223,7 @@ $_checkbox-indeterminate-animation-name: jkl-checkbox-indeterminate-#{string.uni
         display: inline-flex;
 
         &:not(:last-of-type) {
-            margin-right: jkl.$spacing-24;
+            margin-right: jkl.$unit-30;
         }
     }
 

package/styles/components/chip/chip.css

@@ -1,29 +1,29 @@
 /**
  * Do not edit directly
- * Generated on Mon, 28 Oct 2024 14:22:00 GMT
+ * Generated on Wed, 18 Dec 2024 12:25:37 GMT
  */
 [data-layout-density=compact],
 [data-density=compact] {
   --padding-inline-s: 0.5rem;
-  --padding-inline-l: 0.75rem;
-  --padding-icon-s: 0.25rem;
+  --padding-inline-l: calc(var(--jkl-unit-10) * 1.5);
+  --padding-icon-s: calc(var(--jkl-unit-10) * 0.5);
   --padding-icon-l: 0.5rem;
-  --height-l: 2rem;
-  --height-s: 1.5rem;
-  --gap-s: 0.125rem;
-  --gap-l: 0.25rem;
+  --height-l: calc(var(--jkl-unit-10) * 4);
+  --height-s: calc(var(--jkl-unit-10) * 3);
+  --gap-s: calc(var(--jkl-unit-10) * 0.25);
+  --gap-l: calc(var(--jkl-unit-10) * 0.5);
 }
 
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
-  --padding-inline-s: 0.75rem;
-  --padding-inline-l: 1rem;
+  --padding-inline-s: calc(var(--jkl-unit-10) * 1.5);
+  --padding-inline-l: calc(var(--jkl-unit-10) * 2);
   --padding-icon-s: 0.5rem;
-  --padding-icon-l: 0.75rem;
-  --height-l: 2.5rem;
-  --height-s: 2rem;
-  --gap-s: 0.25rem;
+  --padding-icon-l: calc(var(--jkl-unit-10) * 1.5);
+  --height-l: calc(var(--jkl-unit-10) * 5);
+  --height-s: calc(var(--jkl-unit-10) * 4);
+  --gap-s: calc(var(--jkl-unit-10) * 0.5);
   --gap-l: 0.5rem;
 }
 
@@ -69,8 +69,8 @@
   transition-property: opacity;
 }
 .jkl-chip:focus-visible {
-  outline: 2px solid var(--jkl-color-border-action);
-  outline-offset: 2px;
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
 }
 .jkl-chip:hover::after {
   opacity: 0.15;

package/styles/components/chip/chip.min.css

@@ -1 +1 @@
-[data-density=compact],[data-layout-density=compact]{--padding-inline-s:0.5rem;--padding-inline-l:0.75rem;--padding-icon-s:0.25rem;--padding-icon-l:0.5rem;--height-l:2rem;--height-s:1.5rem;--gap-s:0.125rem;--gap-l:0.25rem}:root,[data-density=comfortable],[data-layout-density=comfortable]{--padding-inline-s:0.75rem;--padding-inline-l:1rem;--padding-icon-s:0.5rem;--padding-icon-l:0.75rem;--height-l:2.5rem;--height-s:2rem;--gap-s:0.25rem;--gap-l:0.5rem}.jkl-chip{--text-color:var(--jkl-color-text-default);--border-color:var(--jkl-color-border-separator);--background-color:transparent;--border-width:0.0625rem;font-size:1rem;font-weight:700;line-height:1.5rem;--jkl-icon-weight:500;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;align-items:center;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:99999px;color:var(--text-color);cursor:pointer;display:inline-flex;gap:var(--gap,var(--gap-s));height:var(--height,var(--height-s));padding:0 var(--padding-inline,var(--padding-inline-s));position:relative;white-space:nowrap}@media screen and (forced-colors:active){.jkl-chip{border:2px CanvasText;border-style:none none dotted}}.jkl-chip:after{background-color:var(--text-color);border-radius:inherit;content:"";inset:0;opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-chip:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-chip:hover:after{opacity:.15}.jkl-chip--filter[aria-pressed=true]{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action);--border-color:var(--text-color)}.jkl-chip--small{--padding-inline:var(--padding-inline-s);--gap:var(--gap-s);--padding-icon:var(--padding-icon-s);--height:var(--height-s)}.jkl-chip--large{--padding-inline:var(--padding-inline-l);--gap:var(--gap-l);--padding-icon:var(--padding-icon-l);--height:var(--height-l)}.jkl-chip:has(.jkl-icon){padding-inline-end:var(--padding-icon)}
+[data-density=compact],[data-layout-density=compact]{--padding-inline-s:0.5rem;--padding-inline-l:calc(var(--jkl-unit-10)*1.5);--padding-icon-s:calc(var(--jkl-unit-10)*0.5);--padding-icon-l:0.5rem;--height-l:calc(var(--jkl-unit-10)*4);--height-s:calc(var(--jkl-unit-10)*3);--gap-s:calc(var(--jkl-unit-10)*0.25);--gap-l:calc(var(--jkl-unit-10)*0.5)}:root,[data-density=comfortable],[data-layout-density=comfortable]{--padding-inline-s:calc(var(--jkl-unit-10)*1.5);--padding-inline-l:calc(var(--jkl-unit-10)*2);--padding-icon-s:0.5rem;--padding-icon-l:calc(var(--jkl-unit-10)*1.5);--height-l:calc(var(--jkl-unit-10)*5);--height-s:calc(var(--jkl-unit-10)*4);--gap-s:calc(var(--jkl-unit-10)*0.5);--gap-l:0.5rem}.jkl-chip{--text-color:var(--jkl-color-text-default);--border-color:var(--jkl-color-border-separator);--background-color:transparent;--border-width:0.0625rem;font-size:1rem;font-weight:700;line-height:1.5rem;--jkl-icon-weight:500;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;align-items:center;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:99999px;color:var(--text-color);cursor:pointer;display:inline-flex;gap:var(--gap,var(--gap-s));height:var(--height,var(--height-s));padding:0 var(--padding-inline,var(--padding-inline-s));position:relative;white-space:nowrap}@media screen and (forced-colors:active){.jkl-chip{border:2px CanvasText;border-style:none none dotted}}.jkl-chip:after{background-color:var(--text-color);border-radius:inherit;content:"";inset:0;opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-chip:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-chip:hover:after{opacity:.15}.jkl-chip--filter[aria-pressed=true]{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action);--border-color:var(--text-color)}.jkl-chip--small{--padding-inline:var(--padding-inline-s);--gap:var(--gap-s);--padding-icon:var(--padding-icon-s);--height:var(--height-s)}.jkl-chip--large{--padding-inline:var(--padding-inline-l);--gap:var(--gap-l);--padding-icon:var(--padding-icon-l);--height:var(--height-l)}.jkl-chip:has(.jkl-icon){padding-inline-end:var(--padding-icon)}

package/styles/components/chip/chip.scss

@@ -2,25 +2,25 @@
 @use "../../core/jkl";
 
 @include jkl.compact-density-variables {
-    --padding-inline-s: #{jkl.$spacing-8};
-    --padding-inline-l: #{jkl.$spacing-12};
-    --padding-icon-s: #{jkl.$spacing-4};
-    --padding-icon-l: #{jkl.$spacing-8};
-    --height-l: #{jkl.$spacing-32};
-    --height-s: #{jkl.$spacing-24};
-    --gap-s: #{jkl.$spacing-2};
-    --gap-l: #{jkl.$spacing-4};
+    --padding-inline-s: #{jkl.$unit-10};
+    --padding-inline-l: #{jkl.$unit-15};
+    --padding-icon-s: #{jkl.$unit-05};
+    --padding-icon-l: #{jkl.$unit-10};
+    --height-l: #{jkl.$unit-40};
+    --height-s: #{jkl.$unit-30};
+    --gap-s: #{jkl.$unit-02};
+    --gap-l: #{jkl.$unit-05};
 }
 
 @include jkl.comfortable-density-variables {
-    --padding-inline-s: #{jkl.$spacing-12};
-    --padding-inline-l: #{jkl.$spacing-16};
-    --padding-icon-s: #{jkl.$spacing-8};
-    --padding-icon-l: #{jkl.$spacing-12};
-    --height-l: #{jkl.$spacing-40};
-    --height-s: #{jkl.$spacing-32};
-    --gap-s: #{jkl.$spacing-4};
-    --gap-l: #{jkl.$spacing-8};
+    --padding-inline-s: #{jkl.$unit-15};
+    --padding-inline-l: #{jkl.$unit-20};
+    --padding-icon-s: #{jkl.$unit-10};
+    --padding-icon-l: #{jkl.$unit-15};
+    --height-l: #{jkl.$unit-50};
+    --height-s: #{jkl.$unit-40};
+    --gap-s: #{jkl.$unit-05};
+    --gap-l: #{jkl.$unit-10};
 }
 
 .jkl-chip {

package/styles/components/combobox/combobox.css

@@ -1,6 +1,7 @@
+@charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Mon, 28 Oct 2024 14:22:00 GMT
+ * Generated on Wed, 18 Dec 2024 12:25:37 GMT
  */
 @media screen and (prefers-color-scheme: light) {
   :root {
@@ -83,14 +84,15 @@
   --jkl-combobox-line-height: var(--jkl-body-line-height);
   --jkl-combobox-font-weight: var(--jkl-body-font-weight);
   --jkl-combobox-button-padding: 0.5rem 0.375rem 0.5rem
-      0.75rem;
-  --jkl-combobox-button-active-value-padding: 0.5rem 0.375rem 0.5rem 0.5rem;
+      /* her har vi en random 6px verdi også*/ calc(var(--jkl-unit-10) * 1.5);
+  --jkl-combobox-button-active-value-padding: 0.5rem 0.375rem
+      0.5rem 0.5rem;
   --jkl-combobox-input-height: 3rem;
   --jkl-combobox-actions-right: 0.5rem;
   --jkl-combobox-actions-top: 0.75rem;
   --jkl-combobox-search-input-padding: var(--jkl-combobox-button-padding);
-  --jkl-combobox-native-padding: 0 2.5rem 0 0.5rem;
-  --jkl-combobox-option-padding: 0.5rem 0.75rem;
+  --jkl-combobox-native-padding: 0 calc(var(--jkl-unit-10) * 5) 0 0.5rem;
+  --jkl-combobox-option-padding: 0.5rem calc(var(--jkl-unit-10) * 1.5);
   --jkl-combobox-option-line-height: 2rem;
   --jkl-combobox-input-padding: 3.75rem;
   --jkl-combobox-search-input-height: 1.75rem;
@@ -108,17 +110,18 @@
   --jkl-combobox-font-size: var(--jkl-small-font-size);
   --jkl-combobox-line-height: var(--jkl-small-line-height);
   --jkl-combobox-font-weight: var(--jkl-small-font-weight);
-  --jkl-combobox-button-padding: 0.25rem 1.875rem 0.25rem
+  --jkl-combobox-button-padding: calc(var(--jkl-unit-10) * 0.5) 1.875rem calc(var(--jkl-unit-10) * 0.5)
       0.5rem;
-  --jkl-combobox-button-active-value-padding: 0.25rem 1.875rem 0.25rem 0.5rem;
+  --jkl-combobox-button-active-value-padding: calc(var(--jkl-unit-10) * 0.5) 1.875rem
+      calc(var(--jkl-unit-10) * 0.5) 0.5rem;
   --jkl-combobox-input-height: 2rem;
   --jkl-combobox-actions-right: 0;
   --jkl-combobox-actions-top: 0.375rem;
-  --jkl-combobox-search-input-padding: 0.25rem 0.5rem;
-  --jkl-combobox-native-padding: 1.5rem 0.25rem 0.25rem;
-  --jkl-combobox-option-padding: 0.25rem 0.5rem;
+  --jkl-combobox-search-input-padding: calc(var(--jkl-unit-10) * 0.5) 0.5rem;
+  --jkl-combobox-native-padding: calc(var(--jkl-unit-10) * 3) calc(var(--jkl-unit-10) * 0.5) calc(var(--jkl-unit-10) * 0.5);
+  --jkl-combobox-option-padding: calc(var(--jkl-unit-10) * 0.5) 0.5rem;
   --jkl-combobox-option-line-height: 1.5rem;
-  --jkl-combobox-input-padding: 0.75rem;
+  --jkl-combobox-input-padding: calc(var(--jkl-unit-10) * 1.5);
   --jkl-combobox-search-input-height: 1.25rem;
 }
 
@@ -164,12 +167,14 @@
 .jkl-combobox__wrapper--active-value {
   padding: var(--jkl-combobox-button-active-value-padding);
 }
-.jkl-combobox__wrapper:focus {
-  border-color: var(--jkl-combobox-focus-color);
-  color: var(--jkl-combobox-focus-color);
-  box-shadow: 0 0 0 0.0625rem var(--jkl-combobox-focus-color);
+.jkl-combobox__wrapper:has(:focus-visible) {
+  outline: 3px solid var(--jkl-color-border-action);
+  outline-offset: 3px;
   background-color: var(--jkl-combobox-open-background-color);
 }
+.jkl-combobox__wrapper:has(.jkl-icon-button:focus-visible) {
+  outline: none;
+}
 .jkl-combobox__wrapper:hover {
   border-color: var(--jkl-combobox-focus-color);
   box-shadow: 0 0 0 0.0625rem var(--jkl-combobox-focus-color);
@@ -234,7 +239,6 @@
   right: -0.0625rem;
   background-color: var(--jkl-combobox-open-background-color);
   border: 0.125rem solid var(--jkl-combobox-focus-color);
-  border-top: none;
   border-radius: 0 0 0.1875rem 0.1875rem;
   box-sizing: border-box;
   max-height: calc((var(--jkl-combobox-max-shown-options, 5) + 0.5) * var(--jkl-combobox-input-height));
@@ -285,7 +289,7 @@
   display: flex;
   position: absolute;
   right: var(--jkl-combobox-actions-right);
-  gap: 0.25rem;
+  gap: calc(var(--jkl-unit-10) * 0.5);
   top: var(--jkl-combobox-actions-top);
 }
 .jkl-combobox__chips {
@@ -320,18 +324,12 @@
 .jkl-combobox--invalid .jkl-combobox__search-input::selection {
   background-color: var(--jkl-combobox-search-input-selection-color);
 }
-.jkl-combobox--menu-open .jkl-combobox__wrapper {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-color: var(--jkl-combobox-focus-color);
-  box-shadow: 0 0 0 0.0625rem var(--jkl-combobox-focus-color) inset;
-}
-.jkl-combobox--menu-open .jkl-combobox__wrapper:hover ~ .jkl-combobox__arrow {
-  transform: translateY(calc(-50% + -0.1875rem));
-}
 .jkl-combobox--menu-closed .jkl-combobox__search-input {
   position: absolute;
   background-color: transparent;
   width: 94%;
   padding-right: 0;
+}
+.jkl-combobox--menu-open .jkl-combobox__wrapper:hover .jkl-combobox__actions {
+  transform: translateY(-0.1875rem);
 }

package/styles/components/combobox/combobox.min.css

@@ -1 +1 @@
-@media screen and (prefers-color-scheme:light){:root{--jkl-combobox-border-color:#636060;--jkl-combobox-text-color:#636060;--jkl-combobox-background-color:transparent;--jkl-combobox-open-color:#1b1917;--jkl-combobox-open-background-color:#fff;--jkl-combobox-focus-color:#1b1917;--jkl-combobox-error-background-color:#f6b3b3;--jkl-combobox-error-text-color:#636060;--jkl-combobox-hover-option-color:#1b1917;--jkl-combobox-hover-option-background-color:#f4f2ef;--jkl-combobox-option-description-color:#636060;--jkl-combobox-search-input-selection-color:rgba(27,25,23,.2);--jkl-combobox-search-input-error-selection-color:rgba(27,25,23,.2);--jkl-combobox-marked-value-border:#1b1917;--jkl-combobox-marked-value-shadow:#f9f9f9}}[data-theme=light]{--jkl-combobox-border-color:#636060;--jkl-combobox-text-color:#636060;--jkl-combobox-background-color:transparent;--jkl-combobox-open-color:#1b1917;--jkl-combobox-open-background-color:#fff;--jkl-combobox-focus-color:#1b1917;--jkl-combobox-error-background-color:#f6b3b3;--jkl-combobox-error-text-color:#636060;--jkl-combobox-hover-option-color:#1b1917;--jkl-combobox-hover-option-background-color:#f4f2ef;--jkl-combobox-option-description-color:#636060;--jkl-combobox-search-input-selection-color:rgba(27,25,23,.2);--jkl-combobox-search-input-error-selection-color:rgba(27,25,23,.2);--jkl-combobox-marked-value-border:#1b1917;--jkl-combobox-marked-value-shadow:#f9f9f9}@media screen and (prefers-color-scheme:dark){:root{--jkl-combobox-border-color:#c8c5c3;--jkl-combobox-text-color:#c8c5c3;--jkl-combobox-background-color:transparent;--jkl-combobox-open-color:#f9f9f9;--jkl-combobox-open-background-color:#313030;--jkl-combobox-focus-color:#f9f9f9;--jkl-combobox-error-background-color:#f6b3b3;--jkl-combobox-error-text-color:#636060;--jkl-combobox-hover-option-color:#f9f9f9;--jkl-combobox-hover-option-background-color:#444141;--jkl-combobox-option-description-color:#ece9e5;--jkl-combobox-search-input-selection-color:hsla(0,0%,98%,.25);--jkl-combobox-search-input-error-selection-color:rgba(27,25,23,.2);--jkl-combobox-marked-value-border:#f9f9f9;--jkl-combobox-marked-value-shadow:#1b1917}}[data-theme=dark]{--jkl-combobox-border-color:#c8c5c3;--jkl-combobox-text-color:#c8c5c3;--jkl-combobox-background-color:transparent;--jkl-combobox-open-color:#f9f9f9;--jkl-combobox-open-background-color:#313030;--jkl-combobox-focus-color:#f9f9f9;--jkl-combobox-error-background-color:#f6b3b3;--jkl-combobox-error-text-color:#636060;--jkl-combobox-hover-option-color:#f9f9f9;--jkl-combobox-hover-option-background-color:#444141;--jkl-combobox-option-description-color:#ece9e5;--jkl-combobox-search-input-selection-color:hsla(0,0%,98%,.25);--jkl-combobox-search-input-error-selection-color:rgba(27,25,23,.2);--jkl-combobox-marked-value-border:#f9f9f9;--jkl-combobox-marked-value-shadow:#1b1917}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-combobox-font-size:var(--jkl-body-font-size);--jkl-combobox-line-height:var(--jkl-body-line-height);--jkl-combobox-font-weight:var(--jkl-body-font-weight);--jkl-combobox-button-padding:0.5rem 0.375rem 0.5rem 0.75rem;--jkl-combobox-button-active-value-padding:0.5rem 0.375rem 0.5rem 0.5rem;--jkl-combobox-input-height:3rem;--jkl-combobox-actions-right:0.5rem;--jkl-combobox-actions-top:0.75rem;--jkl-combobox-search-input-padding:var(--jkl-combobox-button-padding);--jkl-combobox-native-padding:0 2.5rem 0 0.5rem;--jkl-combobox-option-padding:0.5rem 0.75rem;--jkl-combobox-option-line-height:2rem;--jkl-combobox-input-padding:3.75rem;--jkl-combobox-search-input-height:1.75rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-combobox-input-height:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-combobox-font-size:var(--jkl-small-font-size);--jkl-combobox-line-height:var(--jkl-small-line-height);--jkl-combobox-font-weight:var(--jkl-small-font-weight);--jkl-combobox-button-padding:0.25rem 1.875rem 0.25rem 0.5rem;--jkl-combobox-button-active-value-padding:0.25rem 1.875rem 0.25rem 0.5rem;--jkl-combobox-input-height:2rem;--jkl-combobox-actions-right:0;--jkl-combobox-actions-top:0.375rem;--jkl-combobox-search-input-padding:0.25rem 0.5rem;--jkl-combobox-native-padding:1.5rem 0.25rem 0.25rem;--jkl-combobox-option-padding:0.25rem 0.5rem;--jkl-combobox-option-line-height:1.5rem;--jkl-combobox-input-padding:0.75rem;--jkl-combobox-search-input-height:1.25rem}.jkl-combobox{border-style:none;outline:0;outline-style:none;position:relative}.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-combobox{border-style:revert;outline:revert;outline-style:revert}.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:revert;outline-style:revert}}.jkl-combobox .jkl-combobox__option:focus{outline:none}.jkl-combobox__wrapper{border:.0625rem solid var(--jkl-combobox-border-color);border-radius:.1875rem;box-shadow:0 0 0 .0625rem transparent;display:flex;max-width:100%;min-width:7rem;padding:var(--jkl-combobox-button-padding);position:relative;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease}.jkl-combobox__wrapper--active-value{padding:var(--jkl-combobox-button-active-value-padding)}.jkl-combobox__wrapper:focus{background-color:var(--jkl-combobox-open-background-color);border-color:var(--jkl-combobox-focus-color);box-shadow:0 0 0 .0625rem var(--jkl-combobox-focus-color);color:var(--jkl-combobox-focus-color)}.jkl-combobox__wrapper:hover{border-color:var(--jkl-combobox-focus-color);box-shadow:0 0 0 .0625rem var(--jkl-combobox-focus-color)}.jkl-combobox__wrapper:hover~.jkl-combobox__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-combobox__button{padding:0}.jkl-combobox__button,.jkl-combobox__search-input{background-color:var(--jkl-combobox-background-color);color:var(--jkl-combobox-text-color);cursor:pointer;display:flex;font-size:var(--jkl-combobox-font-size);font-weight:var(--jkl-combobox-font-weight);line-height:var(--jkl-combobox-line-height);overflow:hidden;text-align:left;text-overflow:ellipsis;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease;width:100%}.jkl-combobox__search-input{align-self:end;border:none;flex:1 1 1ch;max-height:var(--jkl-combobox-search-input-height);outline:none;padding-right:var(--jkl-combobox-input-padding)}.jkl-combobox__arrow{pointer-events:none;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-combobox__arrow,.jkl-combobox__arrow path,.jkl-combobox__arrow svg{stroke:CanvasText;fill:CanvasText}}.jkl-combobox__menu{border:.125rem solid var(--jkl-combobox-focus-color);border-radius:0 0 .1875rem .1875rem;border-top:none;box-sizing:border-box;color:var(--jkl-combobox-text-color);left:-.0625rem;max-height:calc((var(--jkl-combobox-max-shown-options, 5) + .5)*var(--jkl-combobox-input-height));overflow-y:auto;position:absolute;right:-.0625rem;top:100%;transition-duration:.15s;transition-property:height;transition-timing-function:ease;z-index:7000}.jkl-combobox__menu,.jkl-combobox__option{background-color:var(--jkl-combobox-open-background-color)}.jkl-combobox__option{align-items:center;border:0;color:var(--jkl-combobox-open-color);cursor:pointer;display:flex;font-size:var(--jkl-combobox-text-font-size);font-weight:var(--jkl-combobox-text-font-weight);line-height:var(--jkl-combobox-text-line-height);line-height:var(--jkl-combobox-option-line-height);padding:var(--jkl-combobox-option-padding);text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%}.jkl-combobox__option:focus,.jkl-combobox__option:hover{background-color:var(--jkl-combobox-hover-option-background-color);color:var(--jkl-combobox-hover-option-color)}.jkl-combobox__option-description{font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;color:var(--jkl-combobox-option-description-color);display:block;width:100%}.jkl-combobox__option--selected{justify-content:space-between}.jkl-combobox__option--selected:hover{background-color:var(--jkl-combobox-hover-option-background-color)}.jkl-combobox__no-option{padding:var(--jkl-combobox-option-padding)}.jkl-combobox__actions{display:flex;gap:.25rem;position:absolute;right:var(--jkl-combobox-actions-right);top:var(--jkl-combobox-actions-top)}.jkl-combobox__chips{align-items:center;display:flex;flex-wrap:wrap;margin-left:-4px}.jkl-combobox__chips .jkl-chip{margin:1px 4px;z-index:1}.jkl-combobox__chips .jkl-chip__marked{border:1px solid var(--jkl-combobox-marked-value-border);border-radius:6px;box-shadow:0 0 0 2px var(--jkl-combobox-marked-value-shadow) inset;box-sizing:border-box;margin:4px}.jkl-combobox__chips .jkl-chip .jkl-tooltip-trigger{font-weight:700}.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{background-color:var(--jkl-combobox-error-background-color)}.jkl-combobox--invalid .jkl-combobox__button,.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{color:var(--jkl-combobox-error-text-color)}.jkl-combobox--invalid .jkl-combobox__search-input::selection{background-color:var(--jkl-combobox-search-input-selection-color)}.jkl-combobox--menu-open .jkl-combobox__wrapper{border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:var(--jkl-combobox-focus-color);box-shadow:0 0 0 .0625rem var(--jkl-combobox-focus-color) inset}.jkl-combobox--menu-open .jkl-combobox__wrapper:hover~.jkl-combobox__arrow{transform:translateY(calc(-50% - .1875rem))}.jkl-combobox--menu-closed .jkl-combobox__search-input{background-color:transparent;padding-right:0;position:absolute;width:94%}
+@media screen and (prefers-color-scheme:light){:root{--jkl-combobox-border-color:#636060;--jkl-combobox-text-color:#636060;--jkl-combobox-background-color:transparent;--jkl-combobox-open-color:#1b1917;--jkl-combobox-open-background-color:#fff;--jkl-combobox-focus-color:#1b1917;--jkl-combobox-error-background-color:#f6b3b3;--jkl-combobox-error-text-color:#636060;--jkl-combobox-hover-option-color:#1b1917;--jkl-combobox-hover-option-background-color:#f4f2ef;--jkl-combobox-option-description-color:#636060;--jkl-combobox-search-input-selection-color:rgba(27,25,23,.2);--jkl-combobox-search-input-error-selection-color:rgba(27,25,23,.2);--jkl-combobox-marked-value-border:#1b1917;--jkl-combobox-marked-value-shadow:#f9f9f9}}[data-theme=light]{--jkl-combobox-border-color:#636060;--jkl-combobox-text-color:#636060;--jkl-combobox-background-color:transparent;--jkl-combobox-open-color:#1b1917;--jkl-combobox-open-background-color:#fff;--jkl-combobox-focus-color:#1b1917;--jkl-combobox-error-background-color:#f6b3b3;--jkl-combobox-error-text-color:#636060;--jkl-combobox-hover-option-color:#1b1917;--jkl-combobox-hover-option-background-color:#f4f2ef;--jkl-combobox-option-description-color:#636060;--jkl-combobox-search-input-selection-color:rgba(27,25,23,.2);--jkl-combobox-search-input-error-selection-color:rgba(27,25,23,.2);--jkl-combobox-marked-value-border:#1b1917;--jkl-combobox-marked-value-shadow:#f9f9f9}@media screen and (prefers-color-scheme:dark){:root{--jkl-combobox-border-color:#c8c5c3;--jkl-combobox-text-color:#c8c5c3;--jkl-combobox-background-color:transparent;--jkl-combobox-open-color:#f9f9f9;--jkl-combobox-open-background-color:#313030;--jkl-combobox-focus-color:#f9f9f9;--jkl-combobox-error-background-color:#f6b3b3;--jkl-combobox-error-text-color:#636060;--jkl-combobox-hover-option-color:#f9f9f9;--jkl-combobox-hover-option-background-color:#444141;--jkl-combobox-option-description-color:#ece9e5;--jkl-combobox-search-input-selection-color:hsla(0,0%,98%,.25);--jkl-combobox-search-input-error-selection-color:rgba(27,25,23,.2);--jkl-combobox-marked-value-border:#f9f9f9;--jkl-combobox-marked-value-shadow:#1b1917}}[data-theme=dark]{--jkl-combobox-border-color:#c8c5c3;--jkl-combobox-text-color:#c8c5c3;--jkl-combobox-background-color:transparent;--jkl-combobox-open-color:#f9f9f9;--jkl-combobox-open-background-color:#313030;--jkl-combobox-focus-color:#f9f9f9;--jkl-combobox-error-background-color:#f6b3b3;--jkl-combobox-error-text-color:#636060;--jkl-combobox-hover-option-color:#f9f9f9;--jkl-combobox-hover-option-background-color:#444141;--jkl-combobox-option-description-color:#ece9e5;--jkl-combobox-search-input-selection-color:hsla(0,0%,98%,.25);--jkl-combobox-search-input-error-selection-color:rgba(27,25,23,.2);--jkl-combobox-marked-value-border:#f9f9f9;--jkl-combobox-marked-value-shadow:#1b1917}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-combobox-font-size:var(--jkl-body-font-size);--jkl-combobox-line-height:var(--jkl-body-line-height);--jkl-combobox-font-weight:var(--jkl-body-font-weight);--jkl-combobox-button-padding:0.5rem 0.375rem 0.5rem calc(var(--jkl-unit-10)*1.5);--jkl-combobox-button-active-value-padding:0.5rem 0.375rem 0.5rem 0.5rem;--jkl-combobox-input-height:3rem;--jkl-combobox-actions-right:0.5rem;--jkl-combobox-actions-top:0.75rem;--jkl-combobox-search-input-padding:var(--jkl-combobox-button-padding);--jkl-combobox-native-padding:0 calc(var(--jkl-unit-10)*5) 0 0.5rem;--jkl-combobox-option-padding:0.5rem calc(var(--jkl-unit-10)*1.5);--jkl-combobox-option-line-height:2rem;--jkl-combobox-input-padding:3.75rem;--jkl-combobox-search-input-height:1.75rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-combobox-input-height:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-combobox-font-size:var(--jkl-small-font-size);--jkl-combobox-line-height:var(--jkl-small-line-height);--jkl-combobox-font-weight:var(--jkl-small-font-weight);--jkl-combobox-button-padding:calc(var(--jkl-unit-10)*0.5) 1.875rem calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-combobox-button-active-value-padding:calc(var(--jkl-unit-10)*0.5) 1.875rem calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-combobox-input-height:2rem;--jkl-combobox-actions-right:0;--jkl-combobox-actions-top:0.375rem;--jkl-combobox-search-input-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-combobox-native-padding:calc(var(--jkl-unit-10)*3) calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*0.5);--jkl-combobox-option-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-combobox-option-line-height:1.5rem;--jkl-combobox-input-padding:calc(var(--jkl-unit-10)*1.5);--jkl-combobox-search-input-height:1.25rem}.jkl-combobox{border-style:none;outline:0;outline-style:none;position:relative}.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-combobox{border-style:revert;outline:revert;outline-style:revert}.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:revert;outline-style:revert}}.jkl-combobox .jkl-combobox__option:focus{outline:none}.jkl-combobox__wrapper{border:.0625rem solid var(--jkl-combobox-border-color);border-radius:.1875rem;box-shadow:0 0 0 .0625rem transparent;display:flex;max-width:100%;min-width:7rem;padding:var(--jkl-combobox-button-padding);position:relative;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease}.jkl-combobox__wrapper--active-value{padding:var(--jkl-combobox-button-active-value-padding)}.jkl-combobox__wrapper:has(:focus-visible){background-color:var(--jkl-combobox-open-background-color);outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-combobox__wrapper:has(.jkl-icon-button:focus-visible){outline:none}.jkl-combobox__wrapper:hover{border-color:var(--jkl-combobox-focus-color);box-shadow:0 0 0 .0625rem var(--jkl-combobox-focus-color)}.jkl-combobox__wrapper:hover~.jkl-combobox__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-combobox__button{padding:0}.jkl-combobox__button,.jkl-combobox__search-input{background-color:var(--jkl-combobox-background-color);color:var(--jkl-combobox-text-color);cursor:pointer;display:flex;font-size:var(--jkl-combobox-font-size);font-weight:var(--jkl-combobox-font-weight);line-height:var(--jkl-combobox-line-height);overflow:hidden;text-align:left;text-overflow:ellipsis;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease;width:100%}.jkl-combobox__search-input{align-self:end;border:none;flex:1 1 1ch;max-height:var(--jkl-combobox-search-input-height);outline:none;padding-right:var(--jkl-combobox-input-padding)}.jkl-combobox__arrow{pointer-events:none;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-combobox__arrow,.jkl-combobox__arrow path,.jkl-combobox__arrow svg{stroke:CanvasText;fill:CanvasText}}.jkl-combobox__menu{border:.125rem solid var(--jkl-combobox-focus-color);border-radius:0 0 .1875rem .1875rem;box-sizing:border-box;color:var(--jkl-combobox-text-color);left:-.0625rem;max-height:calc((var(--jkl-combobox-max-shown-options, 5) + .5)*var(--jkl-combobox-input-height));overflow-y:auto;position:absolute;right:-.0625rem;top:100%;transition-duration:.15s;transition-property:height;transition-timing-function:ease;z-index:7000}.jkl-combobox__menu,.jkl-combobox__option{background-color:var(--jkl-combobox-open-background-color)}.jkl-combobox__option{align-items:center;border:0;color:var(--jkl-combobox-open-color);cursor:pointer;display:flex;font-size:var(--jkl-combobox-text-font-size);font-weight:var(--jkl-combobox-text-font-weight);line-height:var(--jkl-combobox-text-line-height);line-height:var(--jkl-combobox-option-line-height);padding:var(--jkl-combobox-option-padding);text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%}.jkl-combobox__option:focus,.jkl-combobox__option:hover{background-color:var(--jkl-combobox-hover-option-background-color);color:var(--jkl-combobox-hover-option-color)}.jkl-combobox__option-description{font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;color:var(--jkl-combobox-option-description-color);display:block;width:100%}.jkl-combobox__option--selected{justify-content:space-between}.jkl-combobox__option--selected:hover{background-color:var(--jkl-combobox-hover-option-background-color)}.jkl-combobox__no-option{padding:var(--jkl-combobox-option-padding)}.jkl-combobox__actions{display:flex;gap:calc(var(--jkl-unit-10)*.5);position:absolute;right:var(--jkl-combobox-actions-right);top:var(--jkl-combobox-actions-top)}.jkl-combobox__chips{align-items:center;display:flex;flex-wrap:wrap;margin-left:-4px}.jkl-combobox__chips .jkl-chip{margin:1px 4px;z-index:1}.jkl-combobox__chips .jkl-chip__marked{border:1px solid var(--jkl-combobox-marked-value-border);border-radius:6px;box-shadow:0 0 0 2px var(--jkl-combobox-marked-value-shadow) inset;box-sizing:border-box;margin:4px}.jkl-combobox__chips .jkl-chip .jkl-tooltip-trigger{font-weight:700}.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{background-color:var(--jkl-combobox-error-background-color)}.jkl-combobox--invalid .jkl-combobox__button,.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{color:var(--jkl-combobox-error-text-color)}.jkl-combobox--invalid .jkl-combobox__search-input::selection{background-color:var(--jkl-combobox-search-input-selection-color)}.jkl-combobox--menu-closed .jkl-combobox__search-input{background-color:transparent;padding-right:0;position:absolute;width:94%}.jkl-combobox--menu-open .jkl-combobox__wrapper:hover .jkl-combobox__actions{transform:translateY(-.1875rem)}

package/styles/components/combobox/combobox.scss

@@ -54,17 +54,16 @@ $_combobox-search-input-selection-color--inverted: color.scale(
 @include jkl.comfortable-density-variables {
     @include jkl.declare-font-variables("jkl-combobox", "body");
 
-    --jkl-combobox-button-padding: #{jkl.$spacing-8} #{jkl.rem(6px)} #{jkl.$spacing-8}
-        #{jkl.$spacing-12};
-    --jkl-combobox-button-active-value-padding: #{jkl.$spacing-8} #{jkl.rem(
-            6px
-        )} #{jkl.$spacing-8} #{jkl.$spacing-8};
+    --jkl-combobox-button-padding: #{jkl.$unit-10} #{jkl.rem(6px)} #{jkl.$unit-10}
+        /* her har vi en random 6px verdi også*/ #{jkl.$unit-15};
+    --jkl-combobox-button-active-value-padding: #{jkl.$unit-10} #{jkl.rem(6px)}
+        #{jkl.$unit-10} #{jkl.$unit-10};
     --jkl-combobox-input-height: #{jkl.rem(48px)};
-    --jkl-combobox-actions-right: #{jkl.$spacing-8};
+    --jkl-combobox-actions-right: #{jkl.$unit-10};
     --jkl-combobox-actions-top: #{jkl.rem(12px)};
     --jkl-combobox-search-input-padding: var(--jkl-combobox-button-padding);
-    --jkl-combobox-native-padding: 0 #{jkl.$spacing-40} 0 #{jkl.$spacing-8};
-    --jkl-combobox-option-padding: #{jkl.$spacing-8} #{jkl.$spacing-12};
+    --jkl-combobox-native-padding: 0 #{jkl.$unit-50} 0 #{jkl.$unit-10};
+    --jkl-combobox-option-padding: #{jkl.$unit-10} #{jkl.$unit-15};
     --jkl-combobox-option-line-height: 2rem;
     --jkl-combobox-input-padding: #{jkl.rem(60px)};
     --jkl-combobox-search-input-height: #{jkl.rem(28px)};
@@ -77,19 +76,18 @@ $_combobox-search-input-selection-color--inverted: color.scale(
 @include jkl.compact-density-variables {
     @include jkl.declare-font-variables("jkl-combobox", "small");
 
-    --jkl-combobox-button-padding: #{jkl.$spacing-4} #{jkl.rem(30px)} #{jkl.$spacing-4}
-        #{jkl.$spacing-8};
-    --jkl-combobox-button-active-value-padding: #{jkl.$spacing-4} #{jkl.rem(
-            30px
-        )} #{jkl.$spacing-4} #{jkl.$spacing-8};
+    --jkl-combobox-button-padding: #{jkl.$unit-05} #{jkl.rem(30px)} #{jkl.$unit-05}
+        #{jkl.$unit-10};
+    --jkl-combobox-button-active-value-padding: #{jkl.$unit-05} #{jkl.rem(30px)}
+        #{jkl.$unit-05} #{jkl.$unit-10};
     --jkl-combobox-input-height: #{jkl.rem(32px)};
     --jkl-combobox-actions-right: #{jkl.rem(0)};
     --jkl-combobox-actions-top: #{jkl.rem(6px)};
-    --jkl-combobox-search-input-padding: #{jkl.$spacing-4} #{jkl.$spacing-8};
-    --jkl-combobox-native-padding: #{jkl.$spacing-24} #{jkl.$spacing-4} #{jkl.$spacing-4};
-    --jkl-combobox-option-padding: #{jkl.$spacing-4} #{jkl.$spacing-8};
+    --jkl-combobox-search-input-padding: #{jkl.$unit-05} #{jkl.$unit-10};
+    --jkl-combobox-native-padding: #{jkl.$unit-30} #{jkl.$unit-05} #{jkl.$unit-05};
+    --jkl-combobox-option-padding: #{jkl.$unit-05} #{jkl.$unit-10};
     --jkl-combobox-option-line-height: 1.5rem;
-    --jkl-combobox-input-padding: #{jkl.$spacing-12};
+    --jkl-combobox-input-padding: #{jkl.$unit-15};
     --jkl-combobox-search-input-height: #{jkl.rem(20px)};
 }
 
@@ -118,13 +116,15 @@ $_combobox-search-input-selection-color--inverted: color.scale(
             padding: var(--jkl-combobox-button-active-value-padding);
         }
 
-        &:focus {
-            border-color: var(--jkl-combobox-focus-color);
-            color: var(--jkl-combobox-focus-color);
-            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-combobox-focus-color);
+        &:has(:focus-visible) {
+            @include jkl.focus-outline;
             background-color: var(--jkl-combobox-open-background-color);
         }
 
+        &:has(.jkl-icon-button:focus-visible) {
+            outline: none;
+        }
+
         &:hover {
             border-color: var(--jkl-combobox-focus-color);
             box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-combobox-focus-color);
@@ -190,7 +190,6 @@ $_combobox-search-input-selection-color--inverted: color.scale(
         right: jkl.rem(-1px);
         background-color: var(--jkl-combobox-open-background-color);
         border: jkl.rem(2px) solid var(--jkl-combobox-focus-color);
-        border-top: none;
         border-radius: 0 0 jkl.rem(3px) jkl.rem(3px);
         box-sizing: border-box;
         max-height: calc(
@@ -244,7 +243,7 @@ $_combobox-search-input-selection-color--inverted: color.scale(
         display: flex;
         position: absolute;
         right: var(--jkl-combobox-actions-right);
-        gap: jkl.$spacing-4;
+        gap: jkl.$unit-05;
         top: var(--jkl-combobox-actions-top);
     }
 
@@ -290,19 +289,6 @@ $_combobox-search-input-selection-color--inverted: color.scale(
         }
     }
 
-    &--menu-open {
-        .jkl-combobox__wrapper {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-            border-color: var(--jkl-combobox-focus-color);
-            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-combobox-focus-color) inset;
-
-            &:hover ~ .jkl-combobox__arrow {
-                transform: translateY(calc(-50% + #{jkl.rem(-3px)}));
-            }
-        }
-    }
-
     &--menu-closed {
         .jkl-combobox__search-input {
             position: absolute;
@@ -311,4 +297,10 @@ $_combobox-search-input-selection-color--inverted: color.scale(
             padding-right: 0;
         }
     }
+
+    &--menu-open {
+        .jkl-combobox__wrapper:hover .jkl-combobox__actions {
+            transform: translateY(#{jkl.rem(-3px)});
+        }
+    }
 }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 28 Oct 2024 14:22:00 GMT
+ * Generated on Wed, 18 Dec 2024 12:25:37 GMT
  */
 .jkl-cookie-consent-modal {
   position: fixed;
@@ -26,7 +26,7 @@
   left: 0;
   right: 0;
   width: 100%;
-  padding: 2.5rem 2.5rem 1.875rem 2.5rem;
+  padding: calc(var(--jkl-unit-10) * 5) calc(var(--jkl-unit-10) * 5) 1.875rem calc(var(--jkl-unit-10) * 5);
   min-width: 20rem;
   max-width: 41.25rem;
   background-color: var(--jkl-background-color);
@@ -47,10 +47,10 @@
 }
 @media (width >= 0) and (max-width: 679px) {
   .jkl-cookie-consent-modal__content {
-    top: 2.5rem;
-    margin: 1.5rem;
-    max-width: calc(100% - 1.5rem - 1.5rem);
-    padding: 1.5rem;
+    top: calc(var(--jkl-unit-10) * 5);
+    margin: calc(var(--jkl-unit-10) * 3);
+    max-width: calc(100% - calc(var(--jkl-unit-10) * 3) - calc(var(--jkl-unit-10) * 3));
+    padding: calc(var(--jkl-unit-10) * 3);
   }
 }
 @media screen and (forced-colors: active) {
@@ -59,7 +59,7 @@
   }
 }
 .jkl-cookie-consent-modal__checklist.jkl-list {
-  margin-block: 1rem;
+  margin-block: calc(var(--jkl-unit-10) * 2);
 }
 .jkl-cookie-consent-modal__info-text {
   font-size: 1rem;
@@ -70,7 +70,7 @@
   --jkl-icon-opsz: 20;
 }
 .jkl-cookie-consent-modal__header {
-  margin-bottom: 1.5rem;
+  margin-bottom: calc(var(--jkl-unit-10) * 3);
   font-size: 1.3125rem;
   line-height: 1.75rem;
   font-weight: 700;
@@ -88,11 +88,11 @@
 }
 .jkl-cookie-consent-modal__checkbox {
   margin-bottom: 0.5rem;
-  margin-top: 1.5rem;
+  margin-top: calc(var(--jkl-unit-10) * 3);
 }
 .jkl-cookie-consent-modal__button-group {
-  margin-top: 2.5rem;
+  margin-top: calc(var(--jkl-unit-10) * 5);
 }
 .jkl-cookie-consent-modal__button-group > :not(:first-child) {
-  margin-left: 1.5rem;
+  margin-left: calc(var(--jkl-unit-10) * 3);
 }

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

@@ -1 +1 @@
-.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__content{background-color:var(--jkl-background-color);box-shadow:.25rem .375rem 1rem rgba(0,0,0,.15);box-sizing:border-box;font-size:1.125rem;font-weight:400;left:0;line-height:1.75rem;margin:auto;max-height:80vh;max-width:41.25rem;min-width:20rem;overflow-y:auto;padding:2.5rem 2.5rem 1.875rem;position:fixed;right:0;top:10%;transition:.2s;width:100%;z-index:10000!important;--jkl-icon-weight:300}@media (min-width:680px){.jkl-cookie-consent-modal__content{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}@media (width >= 0) and (max-width:679px){.jkl-cookie-consent-modal__content{margin:1.5rem;max-width:calc(100% - 3rem);padding:1.5rem;top:2.5rem}}@media screen and (forced-colors:active){.jkl-cookie-consent-modal__content{border:2px solid CanvasText}}.jkl-cookie-consent-modal__checklist.jkl-list{margin-block:1rem}.jkl-cookie-consent-modal__info-text{font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}.jkl-cookie-consent-modal__header{font-size:1.3125rem;font-weight:700;line-height:1.75rem;margin-bottom:1.5rem;--jkl-icon-weight:500;--jkl-icon-size:1.2em}@media (min-width:680px){.jkl-cookie-consent-modal__header{font-size:1.5625rem;font-weight:700;line-height:2rem;--jkl-icon-weight:500;--jkl-icon-size:1.2em}}.jkl-cookie-consent-modal__checkbox{margin-bottom:.5rem;margin-top:1.5rem}.jkl-cookie-consent-modal__button-group{margin-top:2.5rem}.jkl-cookie-consent-modal__button-group>:not(:first-child){margin-left:1.5rem}
+.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__content{background-color:var(--jkl-background-color);box-shadow:.25rem .375rem 1rem rgba(0,0,0,.15);box-sizing:border-box;font-size:1.125rem;font-weight:400;left:0;line-height:1.75rem;margin:auto;max-height:80vh;max-width:41.25rem;min-width:20rem;overflow-y:auto;padding:calc(var(--jkl-unit-10)*5) calc(var(--jkl-unit-10)*5) 1.875rem calc(var(--jkl-unit-10)*5);position:fixed;right:0;top:10%;transition:.2s;width:100%;z-index:10000!important;--jkl-icon-weight:300}@media (min-width:680px){.jkl-cookie-consent-modal__content{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}@media (width >= 0) and (max-width:679px){.jkl-cookie-consent-modal__content{margin:calc(var(--jkl-unit-10)*3);max-width:calc(100% - var(--jkl-unit-10)*3 - var(--jkl-unit-10)*3);padding:calc(var(--jkl-unit-10)*3);top:calc(var(--jkl-unit-10)*5)}}@media screen and (forced-colors:active){.jkl-cookie-consent-modal__content{border:2px solid CanvasText}}.jkl-cookie-consent-modal__checklist.jkl-list{margin-block:calc(var(--jkl-unit-10)*2)}.jkl-cookie-consent-modal__info-text{font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20}.jkl-cookie-consent-modal__header{font-size:1.3125rem;font-weight:700;line-height:1.75rem;margin-bottom:calc(var(--jkl-unit-10)*3);--jkl-icon-weight:500;--jkl-icon-size:1.2em}@media (min-width:680px){.jkl-cookie-consent-modal__header{font-size:1.5625rem;font-weight:700;line-height:2rem;--jkl-icon-weight:500;--jkl-icon-size:1.2em}}.jkl-cookie-consent-modal__checkbox{margin-bottom:.5rem;margin-top:calc(var(--jkl-unit-10)*3)}.jkl-cookie-consent-modal__button-group{margin-top:calc(var(--jkl-unit-10)*5)}.jkl-cookie-consent-modal__button-group>:not(:first-child){margin-left:calc(var(--jkl-unit-10)*3)}

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

@@ -31,7 +31,7 @@ $_container-width--compact: jkl.rem(320px);
         left: 0;
         right: 0;
         width: 100%;
-        padding: jkl.$spacing-40 jkl.$spacing-40 jkl.rem(30px) jkl.$spacing-40;
+        padding: jkl.$unit-50 jkl.$unit-50 jkl.rem(30px) jkl.$unit-50;
         min-width: $_container-width--compact;
         max-width: $_container-width;
         background-color: var(--jkl-background-color);
@@ -40,10 +40,10 @@ $_container-width--compact: jkl.rem(320px);
         @include jkl.text-style("body");
 
         @include jkl.small-device {
-            top: jkl.$spacing-40;
-            margin: jkl.$spacing-24;
-            max-width: calc(100% - #{jkl.$spacing-24} - #{jkl.$spacing-24});
-            padding: jkl.$spacing-24;
+            top: jkl.$unit-50;
+            margin: jkl.$unit-30;
+            max-width: calc(100% - #{jkl.$unit-30} - #{jkl.$unit-30});
+            padding: jkl.$unit-30;
         }
 
         @include jkl.forced-colors-mode {
@@ -52,7 +52,7 @@ $_container-width--compact: jkl.rem(320px);
     }
 
     &__checklist.jkl-list {
-        margin-block: jkl.$spacing-16;
+        margin-block: jkl.$unit-20;
     }
 
     &__info-text {
@@ -60,20 +60,20 @@ $_container-width--compact: jkl.rem(320px);
     }
 
     &__header {
-        margin-bottom: jkl.$spacing-24;
+        margin-bottom: jkl.$unit-30;
         @include jkl.text-style("heading-3");
     }
 
     &__checkbox {
-        margin-bottom: jkl.$spacing-8;
-        margin-top: jkl.$spacing-24;
+        margin-bottom: jkl.$unit-10;
+        margin-top: jkl.$unit-30;
     }
 
     &__button-group {
-        margin-top: jkl.$spacing-40;
+        margin-top: jkl.$unit-50;
 
         & > :not(:first-child) {
-            margin-left: jkl.$spacing-24;
+            margin-left: jkl.$unit-30;
         }
     }
 }

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

@@ -49,12 +49,12 @@
     width: var(--jkl-calendar-date-size);
     border-radius: 50%;
     background-color: transparent;
-    color: var(--jkl-calendar-text-color);
+    color: var(--jkl-color);
 
     margin: var(--jkl-calendar-date-margin);
 
     padding: 0;
-    padding-top: jkl.$spacing-2; // adjust visual alignment of text
+    padding-top: jkl.$unit-02; // adjust visual alignment of text
     @include jkl.motion("entrance", "energetic");
     transition-property: color, background-color, box-shadow;
 
@@ -83,7 +83,7 @@
         cursor: pointer;
 
         &:hover {
-            color: var(--jkl-calendar-text-color);
+            color: var(--jkl-color);
         }
     }
 
@@ -91,10 +91,7 @@
         color: var(--jkl-calendar-disabled-day-color);
     }
 
-    @include jkl.keyboard-navigation {
-        &:focus {
-            outline: jkl.rem(2px) solid var(--jkl-calendar-focus-color);
-            outline-offset: jkl.rem(2px);
-        }
+    &:focus-visible {
+        @include jkl.focus-outline;
     }
 }

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

@@ -34,11 +34,8 @@
             background-color: var(--jkl-select-open-background-color);
         }
 
-        @include jkl.keyboard-navigation {
-            &:focus {
-                outline: jkl.rem(2px) solid var(--jkl-calendar-focus-color);
-                outline-offset: 1px;
-            }
+        &:focus-visible {
+            @include jkl.focus-outline;
         }
     }
 
@@ -48,6 +45,6 @@
     }
 
     & + & {
-        margin-inline-start: var(--jkl-spacing-8);
+        margin-inline-start: var(--jkl-unit-10);
     }
 }