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

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-container);
         // 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 {
@@ -87,6 +83,10 @@
     }
 
     .jkl-expander {
+        --hover-background-color: color-mix(in srgb,
+                currentColor 15%,
+                transparent);
+
         box-sizing: border-box;
         background: none;
         appearance: none;
@@ -133,7 +133,7 @@
 
         @media (hover: hover) {
             &:hover {
-                background-color: var(--jkl-color-background-interactive-selected);
+                background-color: var(--hover-background-color);
             }
         }
 

package/styles/components/feedback/_index.scss

@@ -7,4 +7,4 @@
 @use "../message" as message;
 @use "../radio-button" as radio-button;
 @use "../text-input" as text-input;
-@use "../text-area/" as text-area;
+@use "../text-area" as text-area;

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-upoad0m 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uwcgwni {
+  @keyframes jkl-show-upoad0m {
     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;
   }
 }

package/styles/components/feedback/feedback.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);margin-bottom:var(--jkl-unit-20);--jkl-icon-weight:300;--jkl-icon-size:1.2em}.jkl-feedback__fade-in{animation:jkl-show-uwcgwni .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-uwcgwni{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:var(--jkl-unit-10);max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{fill:ButtonText;stroke:ButtonFace}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:after{box-shadow:0 0 0 .125rem currentColor;inset:-.125rem -.125rem -.125rem -.125rem}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem rgba(0,0,0,.1);inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}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}}
+@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:var(--jkl-motion-timing-expressive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-paragraph-small);margin-bottom:var(--jkl-unit-20)}.jkl-feedback__fade-in{animation:jkl-show-upoad0m .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-upoad0m{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:var(--jkl-spacing-12);justify-content:space-between;margin-top:var(--jkl-unit-10);max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:var(--jkl-motion-timing-productive);transition-property:transform,color;transition-timing-function:var(--jkl-motion-easing-standard);width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{fill:ButtonText;stroke:ButtonFace}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:opacity;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem rgba(0,0,0,.1);inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}input:checked+.jkl-feedback-smiley-option:before{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}}

package/styles/components/feedback/feedback.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 @use "sass:string";
-@use "../../core/jkl";
+@use "../../jkl";
 
 $_smiley-size: jkl.rem(40px);
 $_smileys-max-width: $_smiley-size * 9; // 5 smileys med fire like store mellomrom
@@ -82,11 +82,6 @@ $_show-animation-name: jkl-show-#{string.unique-id()};
             transition-property: opacity;
         }
 
-        &::after {
-            inset: jkl.rem(-2px) jkl.rem(-2px) jkl.rem(-2px) jkl.rem(-2px);
-            box-shadow: 0 0 0 jkl.rem(2px) currentColor;
-        }
-
         &::before {
             inset: 0;
             box-shadow: 0 jkl.rem(2px) jkl.rem(30px) rgb(0 0 0 / 10%);
@@ -105,10 +100,10 @@ $_show-animation-name: jkl-show-#{string.unique-id()};
             }
         }
 
-        input:focus + &::after {
-            @include jkl.keyboard-navigation {
-                opacity: 1;
-            }
+        input:focus-visible + & {
+            border-radius: var(--jkl-border-radius-full);
+
+            @include jkl.focus-outline;
         }
     }
 }

package/styles/components/file/file.css

@@ -10,14 +10,14 @@
     --jkl-file-gap: var(--jkl-unit-10) var(--jkl-unit-20);
     --jkl-file-button-width: var(--jkl-unit-50);
     --text-color: var(--jkl-color-text-default);
-    --border: 1px solid var(--jkl-color-border-separator);
+    --border: 1px solid var(--jkl-color-border-subdued);
     --border-radius: 2px;
     --bg: transparent;
-    --transition-time: 250ms;
+    --transition-time: var(--jkl-motion-timing-expressive);
   }
   .jkl-file__content {
-    transition-timing-function: ease;
-    transition-duration: 100ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-snappy);
     transition-property: background-color, border-color, color;
     color: var(--jkl-color-text-default);
     padding: var(--jkl-file-padding);
@@ -32,11 +32,7 @@
     height: fit-content;
   }
   .jkl-file__content__name {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
     grid-area: text;
     /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
     word-break: break-word;
@@ -58,7 +54,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--jkl-color-background-container-low);
+    background: var(--jkl-color-background-page);
     border-radius: 2px;
     overflow: hidden;
     container-type: inline-size;
@@ -106,11 +102,7 @@
     grid-template-areas: "image image" "text button";
   }
   .jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src]))::before {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    font: var(--jkl-text-style-paragraph-small);
     content: attr(data-filetype);
   }
   .jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img {
@@ -121,16 +113,16 @@
     scale: 1;
   }
   .jkl-file[data-state=error] {
-    --bg: var(--jkl-color-functional-error);
+    --bg: var(--jkl-color-error-background-container);
   }
   .jkl-file[data-state=error],
   .jkl-file[data-state=error] a,
   .jkl-file[data-state=error] a:hover,
   .jkl-file[data-state=error] button,
   .jkl-file[data-state=error] span {
-    --text-color: var(--jkl-color-text-on-alert);
+    --text-color: var(--jkl-color-error-text-default);
     --link-color: var(--text-color);
-    --jkl-color-border-action: currentColor;
+    --jkl-color-border-strong: currentColor;
   }
   @keyframes spin {
     from {

package/styles/components/file/file.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-file{--jkl-file-padding:var(--jkl-unit-10);--jkl-file-thumbnail-width:var(--jkl-unit-70);--jkl-file-thumbnail-max-height:var(--jkl-unit-90);--jkl-file-thumbnail-aspect-ratio:1;--jkl-file-gap:var(--jkl-unit-10) var(--jkl-unit-20);--jkl-file-button-width:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--border:1px solid var(--jkl-color-border-separator);--border-radius:2px;--bg:transparent;--transition-time:250ms}.jkl-file__content{align-items:center;background:var(--bg);border:var(--border);border-radius:var(--border-radius);color:var(--jkl-color-text-default);display:grid;gap:var(--jkl-file-gap);grid-template-areas:"image text button";grid-template-columns:var(--jkl-file-thumbnail-width) 1fr var(--jkl-file-button-width);height:-webkit-fit-content;height:fit-content;padding:var(--jkl-file-padding);transition-duration:.1s;transition-property:background-color,border-color,color;transition-timing-function:ease}.jkl-file__content__name{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;grid-area:text;word-break:break-word}.jkl-file__content__name__size{word-break:keep-all}.jkl-file__content__delete{aspect-ratio:1;grid-area:button}.jkl-file__content__thumbnail{align-items:center;anchor-name:--thumb;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);background:var(--jkl-color-background-container-low);border-radius:2px;container-type:inline-size;display:flex;grid-area:image;justify-content:center;max-height:var(--jkl-file-thumbnail-max-height);object-fit:cover;overflow:hidden;position:relative;width:100%;anchor-scope:all;outline:1px solid color-mix(in srgb,currentColor 3%,transparent)}.jkl-file__content__thumbnail:after,.jkl-file__content__thumbnail:before{position:absolute;z-index:1}.jkl-file__content__thumbnail:after{animation:spin 5s linear infinite forwards;aspect-ratio:1;background:var(--text-color);border-radius:1px;content:""/"Laster opp";height:25%;position-anchor:--thumb;position-area:center;scale:0;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in}@starting-style{.jkl-file__content__thumbnail:after{scale:0}}.jkl-file__content__thumbnail img{opacity:1;transition:opacity var(--transition-time) ease-in-out}.jkl-file__content__thumbnail img[src]{height:100%;object-fit:cover;width:100%}.jkl-file[class*=card]{--jkl-file-thumbnail-width:100%;--jkl-file-thumbnail-aspect-ratio:16/9}.jkl-file[class*=card] .jkl-file__content{grid-template-areas:"image image" "text button";grid-template-columns:1fr var(--jkl-file-button-width);grid-template-rows:var(--jkl-file-thumbnail-max-height) auto}.jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src])):before{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;content:attr(data-filetype)}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img{opacity:0}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail:after{display:block;scale:1}.jkl-file[data-state=error]{--bg:var(--jkl-color-functional-error)}.jkl-file[data-state=error],.jkl-file[data-state=error] a,.jkl-file[data-state=error] a:hover,.jkl-file[data-state=error] button,.jkl-file[data-state=error] span{--text-color:var(--jkl-color-text-on-alert);--link-color:var(--text-color);--jkl-color-border-action:currentColor}@keyframes spin{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}}
+@layer jokul.components{.jkl-file{--jkl-file-padding:var(--jkl-unit-10);--jkl-file-thumbnail-width:var(--jkl-unit-70);--jkl-file-thumbnail-max-height:var(--jkl-unit-90);--jkl-file-thumbnail-aspect-ratio:1;--jkl-file-gap:var(--jkl-unit-10) var(--jkl-unit-20);--jkl-file-button-width:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--border:1px solid var(--jkl-color-border-subdued);--border-radius:2px;--bg:transparent;--transition-time:var(--jkl-motion-timing-expressive)}.jkl-file__content{align-items:center;background:var(--bg);border:var(--border);border-radius:var(--border-radius);color:var(--jkl-color-text-default);display:grid;gap:var(--jkl-file-gap);grid-template-areas:"image text button";grid-template-columns:var(--jkl-file-thumbnail-width) 1fr var(--jkl-file-button-width);height:-webkit-fit-content;height:fit-content;padding:var(--jkl-file-padding);transition-duration:var(--jkl-motion-timing-snappy);transition-property:background-color,border-color,color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-file__content__name{font:var(--jkl-text-style-paragraph-small);grid-area:text;word-break:break-word}.jkl-file__content__name__size{word-break:keep-all}.jkl-file__content__delete{aspect-ratio:1;grid-area:button}.jkl-file__content__thumbnail{align-items:center;anchor-name:--thumb;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);background:var(--jkl-color-background-page);border-radius:2px;container-type:inline-size;display:flex;grid-area:image;justify-content:center;max-height:var(--jkl-file-thumbnail-max-height);object-fit:cover;overflow:hidden;position:relative;width:100%;anchor-scope:all;outline:1px solid color-mix(in srgb,currentColor 3%,transparent)}.jkl-file__content__thumbnail:after,.jkl-file__content__thumbnail:before{position:absolute;z-index:1}.jkl-file__content__thumbnail:after{animation:spin 5s linear infinite forwards;aspect-ratio:1;background:var(--text-color);border-radius:1px;content:""/"Laster opp";height:25%;position-anchor:--thumb;position-area:center;scale:0;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in}@starting-style{.jkl-file__content__thumbnail:after{scale:0}}.jkl-file__content__thumbnail img{opacity:1;transition:opacity var(--transition-time) ease-in-out}.jkl-file__content__thumbnail img[src]{height:100%;object-fit:cover;width:100%}.jkl-file[class*=card]{--jkl-file-thumbnail-width:100%;--jkl-file-thumbnail-aspect-ratio:16/9}.jkl-file[class*=card] .jkl-file__content{grid-template-areas:"image image" "text button";grid-template-columns:1fr var(--jkl-file-button-width);grid-template-rows:var(--jkl-file-thumbnail-max-height) auto}.jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src])):before{content:attr(data-filetype);font:var(--jkl-text-style-paragraph-small)}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img{opacity:0}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail:after{display:block;scale:1}.jkl-file[data-state=error]{--bg:var(--jkl-color-error-background-container)}.jkl-file[data-state=error],.jkl-file[data-state=error] a,.jkl-file[data-state=error] a:hover,.jkl-file[data-state=error] button,.jkl-file[data-state=error] span{--text-color:var(--jkl-color-error-text-default);--link-color:var(--text-color);--jkl-color-border-strong:currentColor}@keyframes spin{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}}

package/styles/components/file/file.scss

@@ -1,5 +1,4 @@
-@use "../../core/jkl";
-@use "../../core/jkl/colors";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-file {
@@ -10,7 +9,7 @@
         --jkl-file-gap: var(--jkl-unit-10) var(--jkl-unit-20);
         --jkl-file-button-width: var(--jkl-unit-50);
         --text-color: var(--jkl-color-text-default);
-        --border: 1px solid var(--jkl-color-border-separator);
+        --border: 1px solid var(--jkl-color-border-subdued);
         --border-radius: 2px;
         --bg: transparent;
         --transition-time: #{jkl.$motion-timing-expressive};
@@ -64,7 +63,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            background: var(--jkl-color-background-container-low);
+            background: var(--jkl-color-background-page);
             border-radius: 2px;
             overflow: hidden;
             container-type: inline-size;
@@ -146,16 +145,16 @@
 
         // Error state
         &[data-state="error"] {
-            --bg: var(--jkl-color-functional-error);
+            --bg: var(--jkl-color-error-background-container);
 
             &,
             a,
             a:hover,
             button,
             span {
-                --text-color: var(--jkl-color-text-on-alert);
+                --text-color: var(--jkl-color-error-text-default);
                 --link-color: var(--text-color);
-                --jkl-color-border-action: currentColor;
+                --jkl-color-border-strong: currentColor;
             }
         }
     }
@@ -164,6 +163,7 @@
         from {
             transform: rotate(0turn);
         }
+
         to {
             transform: rotate(1turn);
         }