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

package/styles/components/toggle-switch/toggle-switch.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@use "../../core/jkl";
+@use "../../jkl";
 @use "./toggle-slider";
 
 .jkl-toggle-switch {
@@ -7,14 +7,14 @@
     --jkl-toggle-switch-width: var(--jkl-unit-60);
     --jkl-toggle-switch-knob-size: var(--jkl-unit-30);
     --border-width: #{jkl.rem(1px)};
-    --switch-padding: #{jkl.rem(4px)};
+    --switch-padding: var(--jkl-unit-05);
     --knob-position: 0;
-    --switch-border-color: var(--jkl-color-border-action);
-    --indicator-color: var(--jkl-color-background-container-high);
-    --knob-border-color: var(--jkl-color-border-action);
-    --knob-color: var(--jkl-color-background-container-high);
+    --switch-border-color: var(--jkl-color-border-strong);
+    --indicator-color: var(--jkl-color-background-container);
+    --knob-border-color: var(--jkl-color-border-strong);
+    --knob-color: var(--jkl-color-background-container);
     --text-color: var(--jkl-color-text-default);
-    --icon-color: var(--jkl-color-text-inverted);
+    --icon-color: var(--jkl-color-text-on-action);
 
     background: transparent;
     color: var(--text-color);
@@ -38,8 +38,8 @@
 
     &[aria-pressed="true"],
     [aria-checked="true"] > & {
-        --indicator-color: var(--jkl-color-background-container-inverted);
-        --knob-color: var(--jkl-color-text-inverted);
+        --indicator-color: var(--jkl-color-background-action);
+        --knob-color: var(--jkl-color-text-on-action);
         --knob-position: calc(
             var(--jkl-toggle-switch-width) - var(
                     --jkl-toggle-switch-knob-size
@@ -66,7 +66,6 @@
     --jkl-toggle-switch-height: var(--jkl-unit-40);
     --jkl-toggle-switch-width: var(--jkl-unit-60);
     --jkl-toggle-switch-knob-size: var(--jkl-unit-30);
-    --jkl-toggle-switch-indicator-spacing: 0;
 
     position: relative;
     box-sizing: border-box;
@@ -116,13 +115,7 @@
         position: absolute;
         top: 50%;
         right: 100%;
-        margin-right: var(--jkl-toggle-switch-indicator-spacing);
+        font-size: var(--jkl-unit-20);
         transform: translate(0, -50%);
-
-        & > .jkl-icon__icon {
-            // Uten dette får ikonet feil alignment. Mulig bug i ikonpakken?
-            position: absolute;
-            inset: 0;
-        }
     }
 }

package/styles/components/tooltip/tooltip.css

@@ -7,19 +7,15 @@
   }
   html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus {
     --jkl-icon-weight: 400;
-    font-weight: 700;
+    font-weight: var(--jkl-font-weight-bold);
     letter-spacing: -0.014em;
   }
   .jkl-tooltip-content {
     --content-padding: var(--jkl-unit-15);
-    --background-color: var(--jkl-color-background-container-inverted);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-relaxed);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    --jkl-icon-size: 1.2em;
+    --background-color: var(--jkl-color-background-action);
+    font: var(--jkl-text-style-paragraph-small);
     background-color: var(--background-color);
-    color: var(--jkl-color-text-inverted);
+    color: var(--jkl-color-text-on-action);
     display: inline-block;
     min-width: min-content;
     max-width: min(19.375rem, 100%);
@@ -33,8 +29,8 @@
     }
   }
   .jkl-tooltip-question-button {
-    transition-timing-function: ease-in;
-    transition-duration: 100ms;
+    transition-timing-function: var(--jkl-motion-easing-exit);
+    transition-duration: var(--jkl-motion-timing-snappy);
     transition-property: color;
     cursor: pointer;
     position: relative;
@@ -70,7 +66,7 @@
     --button-color: var(--jkl-color-text-interactive-hover);
   }
   .jkl-tooltip-question-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 0;
   }
   .jkl-tooltip-question-button::after {

package/styles/components/tooltip/tooltip.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-tooltip-trigger{all:unset}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}.jkl-tooltip-content{--content-padding:var(--jkl-unit-15);--background-color:var(--jkl-color-background-container-inverted);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);--jkl-icon-weight:300;--jkl-icon-size:1.2em;background-color:var(--background-color);color:var(--jkl-color-text-inverted);display:inline-block;max-width:min(19.375rem,100%);min-width:-webkit-min-content;min-width:min-content;padding:var(--content-padding);position:absolute;z-index:10000}@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-question-button{align-items:baseline;background-color:transparent;border-radius:9999px;border-style:none;color:var(--jkl-color-text-interactive);cursor:pointer;display:inline-flex;outline:0;outline-style:none;padding:0;position:relative;transform:translateY(min(.25em,.375rem));transition-duration:.1s;transition-property:color;transition-timing-function:ease-in}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert;outline:revert;outline-style:revert}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{--button-color:var(--jkl-color-text-interactive-hover)}.jkl-tooltip-question-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-tooltip-question-button:after{content:"";left:50%;min-height:44px;min-width:44px;position:absolute;top:50%;translate:-50% -50%}}
+@layer jokul.components{.jkl-tooltip-trigger{all:unset}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-tooltip-content{--content-padding:var(--jkl-unit-15);--background-color:var(--jkl-color-background-action);background-color:var(--background-color);color:var(--jkl-color-text-on-action);display:inline-block;font:var(--jkl-text-style-paragraph-small);max-width:min(19.375rem,100%);min-width:-webkit-min-content;min-width:min-content;padding:var(--content-padding);position:absolute;z-index:10000}@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-question-button{align-items:baseline;background-color:transparent;border-radius:9999px;border-style:none;color:var(--jkl-color-text-interactive);cursor:pointer;display:inline-flex;outline:0;outline-style:none;padding:0;position:relative;transform:translateY(min(.25em,.375rem));transition-duration:var(--jkl-motion-timing-snappy);transition-property:color;transition-timing-function:var(--jkl-motion-easing-exit)}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert;outline:revert;outline-style:revert}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{--button-color:var(--jkl-color-text-interactive-hover)}.jkl-tooltip-question-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}.jkl-tooltip-question-button:after{content:"";left:50%;min-height:44px;min-width:44px;position:absolute;top:50%;translate:-50% -50%}}

package/styles/components/tooltip/tooltip.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@use "../../core/jkl";
+@use "../../jkl";
 
 $_tooltip-border-width: jkl.rem(1px);
 $_focus-ring-distance: jkl.rem(-1px); // Negativ margin for å unngå subpixel mellomrom mellom border og box-shadow
@@ -18,11 +18,11 @@ $_focus-ring-width: jkl.rem(2px);
 
     .jkl-tooltip-content {
         --content-padding: var(--jkl-unit-15);
-        --background-color: var(--jkl-color-background-container-inverted);
+        --background-color: var(--jkl-color-background-action);
 
         @include jkl.text-style("paragraph-small");
         background-color: var(--background-color);
-        color: var(--jkl-color-text-inverted);
+        color: var(--jkl-color-text-on-action);
         display: inline-block;
         min-width: min-content;
         max-width: min(jkl.rem(310px),
@@ -70,4 +70,4 @@ $_focus-ring-width: jkl.rem(2px);
             min-height: 44px;
         }
     }
-}
+}