refactor: rydd opp i plassering og navn blant motion-funksjoner

BREAKING CHANGE:
Maps fra motion er gjort private, jkl-motion er nå easing, jkl-timing er nå timing.

packages/core/functions/_convert.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:map";
 @use "sass:math";
 @use "sass:string";
@@ -87,3 +88,14 @@
 
     @return $value * map.get($units, $unit);
 }
+
+@function urlencodecolor($color) {
+    @if type-of($color) == "color" and str-index(#{$color}, "#") == 1 {
+        $hex: string.slice(color.ie-hex-str($color), 4);
+        $converted-color: string.unquote("#{$hex}");
+
+        @return "%23" + $converted-color;
+    }
+
+    @return $color;
+}

packages/core/functions/_easing.scss

@@ -0,0 +1,16 @@
+@use "sass:map";
+
+$_easings: (
+    "standard": ease,
+    "entrance": ease-out,
+    "exit": ease-in,
+    "easeInBounceOut": cubic-bezier(0, 0, 0.375, 1.17),
+);
+
+@function easing($name, $easings: $_easings) {
+    @if map.has-key($easings, $name) {
+        @return map.get($easings, $name);
+    } @else {
+        @error 'Unable to find an easing named #{$name} in our supported easings.';
+    }
+}

packages/core/functions/_index.scss

@@ -1,2 +1,4 @@
 @forward "convert";
+@forward "easing";
+@forward "timing";
 @forward "responsive-units";

packages/core/functions/_timing.scss

@@ -0,0 +1,16 @@
+@use "sass:map";
+
+$_timings: (
+    "energetic": 75ms,
+    "productive": 150ms,
+    "expressive": 250ms,
+    "lazy": 400ms,
+);
+
+@function timing($mode, $timings: $_timings) {
+    @if map.has-key($timings, $mode) {
+        @return map.get($timings, $mode);
+    } @else {
+        @error 'Unable to find a mode for #{$mode}';
+    }
+}

packages/core/mixins/_helpers.scss

@@ -1,5 +1,4 @@
 @use "sass:string";
-@use "sass:color";
 @use "../variables/typography";
 
 @mixin light-mode-variables {
@@ -26,17 +25,6 @@
     }
 }
 
-@function urlencodecolor($color) {
-    @if type-of($color) == "color" and str-index(#{$color}, "#") == 1 {
-        $hex: string.slice(color.ie-hex-str($color), 4);
-        $converted-color: string.unquote("#{$hex}");
-
-        @return "%23" + $converted-color;
-    }
-
-    @return $color;
-}
-
 @mixin flex($align-items: center, $justify-content: center) {
     display: flex;
     align-items: $align-items;

packages/core/mixins/_motion.scss

@@ -1,34 +1,6 @@
-$jkl--easings: (
-    "standard": ease,
-    "entrance": ease-out,
-    "exit": ease-in,
-    "easeInBounceOut": cubic-bezier(0, 0, 0.375, 1.17),
-);
-
-$jkl--timings: (
-    "energetic": 75ms,
-    "productive": 150ms,
-    "expressive": 250ms,
-    "lazy": 400ms,
-);
-
-@function jkl-motion($name, $easings: $jkl--easings) {
-    @if map-has-key($easings, $name) {
-        @return map-get($easings, $name);
-    } @else {
-        @error 'Unable to find an easing named #{$name} in our supported easings.';
-    }
-}
-
-@function jkl-timing($mode, $timings: $jkl--timings) {
-    @if map-has-key($timings, $mode) {
-        @return map-get($timings, $mode);
-    } @else {
-        @error 'Unable to find a mode for #{$mode}';
-    }
-}
+@use "../functions";
 
 @mixin motion($name: "standard", $mode: "productive") {
-    transition-timing-function: jkl-motion($name);
-    transition-duration: jkl-timing($mode);
+    transition-timing-function: functions.easing($name);
+    transition-duration: functions.timing($mode);
 }

packages/core/styles/_labels.scss

@@ -1,4 +1,3 @@
-@use "sass:map";
 @use "../jkl";
 
 @include jkl.light-mode-variables {
@@ -50,8 +49,8 @@
         color: var(--label-error-color);
 
         .jkl-form-support-label__icon {
-            animation: map.get(jkl.$jkl--timings, "lazy") cubic-bezier(0, 0, 0.3, 1)
-                map.get(jkl.$jkl--timings, "expressive") jkl-support-label-icon-entrance forwards;
+            animation: jkl.timing("lazy") cubic-bezier(0, 0, 0.3, 1) jkl.timing("expressive")
+                jkl-support-label-icon-entrance forwards;
         }
     }