@fremtind/jokul 0.1.1

package/src/components/navigation/styles/link.css

@@ -0,0 +1,152 @@
+@charset "UTF-8";
+/**
+ * Do not edit directly
+ * Generated on Tue, 10 Sep 2024 05:21:22 GMT
+ */
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-link-color: #1b1917;
+    --jkl-link-hover-color: #636060;
+    --jkl-link-active-color: #1b1917;
+  }
+}
+[data-theme=light] {
+  --jkl-link-color: #1b1917;
+  --jkl-link-hover-color: #636060;
+  --jkl-link-active-color: #1b1917;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-link-color: #f9f9f9;
+    --jkl-link-hover-color: #c8c5c3;
+    --jkl-link-active-color: #f9f9f9;
+  }
+}
+[data-theme=dark] {
+  --jkl-link-color: #f9f9f9;
+  --jkl-link-hover-color: #c8c5c3;
+  --jkl-link-active-color: #f9f9f9;
+}
+
+.jkl-link {
+  color: var(--jkl-link-color);
+  background-image: linear-gradient(to bottom, var(--jkl-link-color) 0%, var(--jkl-link-color) 100%);
+  background-position: 0 calc(100% - (0.125rem - 0.0625rem));
+  background-size: 0.0625rem 0.0625rem;
+  background-repeat: repeat-x;
+  transition-timing-function: ease;
+  transition-duration: 75ms;
+  transition-property: color;
+  outline: none;
+  text-decoration: none;
+  /* Show arrow after external links, or links opening
+  in a new window or tab: */
+}
+.jkl-link:hover:not(:focus) {
+  color: var(--jkl-link-hover-color);
+  background-image: linear-gradient(to bottom, var(--jkl-link-hover-color) 0%, var(--jkl-link-hover-color) 100%);
+}
+.jkl-link:hover {
+  background-image: linear-gradient(to bottom, var(--jkl-link-hover-color) 0%, var(--jkl-link-hover-color) 100%);
+}
+.jkl-link:focus-visible {
+  outline: 2px solid var(--jkl-color-border-action);
+  outline-offset: 2px;
+  background: none;
+}
+.jkl-link:active {
+  background-position: 0 calc(100% - (0.125rem - 0.0625rem));
+}
+.jkl-link[target=_blank]::after, .jkl-link--external::after {
+  content: "↗";
+  content: "↗"/"";
+  alt: " ";
+}
+@media screen and (forced-colors: active) {
+  .jkl-link {
+    outline: revert;
+    text-decoration: revert;
+  }
+}
+
+.jkl-nav-link {
+  color: var(--jkl-link-color);
+  box-sizing: border-box;
+  font-weight: 400;
+  text-decoration: none;
+  position: relative;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-nav-link {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-nav-link::after {
+  content: "→";
+  content: "→"/"";
+  alt: " ";
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: padding-left, padding-right;
+  display: inline;
+  margin-left: -0.2em;
+  padding-left: 0.35em;
+  padding-right: 0.35em;
+}
+.jkl-nav-link:hover:not(:focus) {
+  color: var(--jkl-link-hover-color);
+}
+.jkl-nav-link:hover:not(:focus)::after {
+  padding-left: 0.7em;
+  padding-right: 0;
+}
+.jkl-nav-link:focus-visible {
+  outline: 2px solid var(--jkl-color-border-action);
+  outline-offset: 2px;
+}
+.jkl-nav-link:focus-visible::after {
+  padding-left: 0.7em;
+  padding-right: 0;
+}
+.jkl-nav-link--active {
+  --jkl-icon-weight: 500;
+  font-weight: 700;
+  letter-spacing: -0.014em;
+}
+
+.jkl-nav-link--back {
+  padding-right: 0;
+  padding-left: 0.3em;
+  margin-left: -0.3em;
+}
+.jkl-nav-link--back::after {
+  display: none;
+}
+.jkl-nav-link--back::before {
+  content: "←";
+  content: "←"/"";
+  alt: " ";
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transform: translateX(0);
+  transition-property: transform;
+  display: inline-block;
+  padding-right: 0.25rem;
+}
+.jkl-nav-link--back:hover::before, .jkl-nav-link--back:focus-visible::before {
+  transform: translateX(-33%);
+}

package/src/components/navigation/styles/link.min.css

@@ -0,0 +1 @@
+@charset "UTF-8";@media screen and (prefers-color-scheme:light){:root{--jkl-link-color:#1b1917;--jkl-link-hover-color:#636060;--jkl-link-active-color:#1b1917}}[data-theme=light]{--jkl-link-color:#1b1917;--jkl-link-hover-color:#636060;--jkl-link-active-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-link-color:#f9f9f9;--jkl-link-hover-color:#c8c5c3;--jkl-link-active-color:#f9f9f9}}[data-theme=dark]{--jkl-link-color:#f9f9f9;--jkl-link-hover-color:#c8c5c3;--jkl-link-active-color:#f9f9f9}.jkl-link{background-image:linear-gradient(to bottom,var(--jkl-link-color) 0,var(--jkl-link-color) 100%);background-position:0 calc(100% - .0625rem);background-repeat:repeat-x;background-size:.0625rem .0625rem;color:var(--jkl-link-color);outline:none;text-decoration:none;transition-duration:75ms;transition-property:color;transition-timing-function:ease}.jkl-link:hover:not(:focus){color:var(--jkl-link-hover-color)}.jkl-link:hover,.jkl-link:hover:not(:focus){background-image:linear-gradient(to bottom,var(--jkl-link-hover-color) 0,var(--jkl-link-hover-color) 100%)}.jkl-link:focus-visible{background:none;outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-link:active{background-position:0 calc(100% - .0625rem)}.jkl-link--external:after,.jkl-link[target=_blank]:after{alt:" ";content:"↗";content:"↗"/""}@media screen and (forced-colors:active){.jkl-link{outline:revert;-webkit-text-decoration:revert;text-decoration:revert}}.jkl-nav-link{border-style:none;box-sizing:border-box;color:var(--jkl-link-color);font-weight:400;position:relative;text-decoration:none}.jkl-nav-link,.jkl-nav-link:active,.jkl-nav-link:focus,.jkl-nav-link:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-nav-link{border-style:revert}.jkl-nav-link,.jkl-nav-link:active,.jkl-nav-link:focus,.jkl-nav-link:hover{outline:revert;outline-style:revert}}.jkl-nav-link:after{alt:" ";content:"→";content:"→"/"";display:inline;margin-left:-.2em;padding-left:.35em;padding-right:.35em;transition-duration:.15s;transition-property:padding-left,padding-right;transition-timing-function:ease}.jkl-nav-link:hover:not(:focus){color:var(--jkl-link-hover-color)}.jkl-nav-link:hover:not(:focus):after{padding-left:.7em;padding-right:0}.jkl-nav-link:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-nav-link:focus-visible:after{padding-left:.7em;padding-right:0}.jkl-nav-link--active{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-nav-link--back{margin-left:-.3em;padding-left:.3em;padding-right:0}.jkl-nav-link--back:after{display:none}.jkl-nav-link--back:before{alt:" ";content:"←";content:"←"/"";display:inline-block;padding-right:.25rem;transform:translateX(0);transition-duration:.15s;transition-property:transform;transition-timing-function:ease}.jkl-nav-link--back:focus-visible:before,.jkl-nav-link--back:hover:before{transform:translateX(-33%)}

package/src/components/navigation/styles/link.scss

@@ -0,0 +1,138 @@
+@use "../../../core/jkl";
+
+@mixin _underline-gradient($color) {
+    background-image: linear-gradient(to bottom, $color 0%, $color 100%);
+}
+
+$_right-arrow: "\2192"; // unicode right arrow
+$_left-arrow: "\2190"; // unicode left arrow
+$_north-east-arrow: "\2197"; // unicode north east arrow (up/right)
+
+$_link-underline-thickness: jkl.rem(1px);
+$_link-underline-thickness--focus: jkl.rem(2px);
+
+@include jkl.light-mode-variables {
+    --jkl-link-color: #{jkl.$color-granitt};
+    --jkl-link-hover-color: #{jkl.$color-stein};
+    --jkl-link-active-color: #{jkl.$color-granitt};
+}
+@include jkl.dark-mode-variables {
+    --jkl-link-color: #{jkl.$color-snohvit};
+    --jkl-link-hover-color: #{jkl.$color-svaberg};
+    --jkl-link-active-color: #{jkl.$color-snohvit};
+}
+
+.jkl-link {
+    color: var(--jkl-link-color);
+    @include _underline-gradient(var(--jkl-link-color));
+    background-position: 0 calc(100% - (#{$_link-underline-thickness--focus} - #{$_link-underline-thickness}));
+    background-size: $_link-underline-thickness $_link-underline-thickness;
+    background-repeat: repeat-x;
+    @include jkl.motion("standard", "energetic");
+    transition-property: color;
+    outline: none;
+    text-decoration: none;
+
+    &:hover:not(:focus) {
+        color: var(--jkl-link-hover-color);
+        @include _underline-gradient(var(--jkl-link-hover-color));
+    }
+
+    &:hover {
+        @include _underline-gradient(var(--jkl-link-hover-color));
+    }
+
+    &:focus-visible {
+        @include jkl.focus-outline;
+        background: none;
+    }
+
+    &:active {
+        background-position: 0 calc(100% - (#{$_link-underline-thickness--focus} - #{$_link-underline-thickness}));
+    }
+
+    /* Show arrow after external links, or links opening
+    in a new window or tab: */
+    &[target="_blank"],
+    &--external {
+        &::after {
+            @include jkl.decorative($content: $_north-east-arrow);
+        }
+    }
+
+    @include jkl.forced-colors-mode {
+        outline: revert;
+        text-decoration: revert;
+    }
+}
+
+.jkl-nav-link {
+    color: var(--jkl-link-color);
+
+    box-sizing: border-box;
+    font-weight: jkl.$typography-weight-normal;
+    text-decoration: none;
+    position: relative;
+
+    @include jkl.reset-outline;
+
+    &::after {
+        @include jkl.decorative($content: $_right-arrow);
+        @include jkl.motion;
+        transition-property: padding-left, padding-right;
+        display: inline;
+        margin-left: -0.2em;
+        padding-left: 0.35em;
+        padding-right: 0.35em;
+    }
+
+    &:hover:not(:focus) {
+        color: var(--jkl-link-hover-color);
+
+        &::after {
+            padding-left: 0.7em;
+            padding-right: 0;
+        }
+    }
+
+    &:focus-visible {
+        @include jkl.focus-outline;
+
+        &::after {
+            padding-left: 0.7em;
+            padding-right: 0;
+        }
+    }
+
+    &--active {
+        @include jkl.no-grow-bold;
+    }
+}
+
+.jkl-nav-link--back {
+    padding-right: 0;
+
+    $left-arrow-focus-margin: 0.3em; // Unngå at border ved tastaturfokus "kapper" pila
+    padding-left: $left-arrow-focus-margin;
+    margin-left: -#{$left-arrow-focus-margin};
+
+    &::after {
+        display: none;
+    }
+
+    &::before {
+        @include jkl.decorative($content: $_left-arrow);
+        @include jkl.motion;
+        transform: translateX(0);
+        transition-property: transform;
+        display: inline-block;
+        padding-right: jkl.rem(4px);
+    }
+
+    &:hover,
+    &:focus-visible {
+        &::before {
+            transform: translateX(-33%);
+        }
+    }
+}

package/src/core/jkl/_colors.scss

@@ -0,0 +1,26 @@
+@use "sass:map";
+@use "./legacy-tokens" as *;
+
+/// @type Color
+$color-focus-color: $color-granitt;
+
+/// @type Color
+$color-focus-color--darkbg: $color-snohvit;
+
+// Varslingsfarger / Meldingsfarger.
+// Kun til bruk som bakgrunn i komponenter som gir varslinger til bruker.
+$_varslingsfarger: (
+    "suksess": var(--jkl-success),
+    "feil": var(--jkl-error),
+    "info": var(--jkl-info),
+    "advarsel": var(--jkl-warning),
+);
+
+/// Hent fargekoden til en navngitt varslingsfarge
+/// @param {"suksess" | "feil" | "info" | "advarsel"} $farge - Navn på fargen du ønsker verdien til
+/// @deprecated Bruk tokens direkte ($color-success, $color-error, $color-info, $color-warning)
+/// @return {Color} - fargekoden til den ønskede fargen
+/// @access private - forwardes ikke ut av modulen, men er tilgjengelig ved direkteimport. KUN FOR INTERN BRUK I JØKUL.
+@function varslingsfarge($farge) {
+    @return map.get($_varslingsfarger, $farge);
+}

package/src/core/jkl/_convert.scss

@@ -0,0 +1,96 @@
+@use "sass:color";
+@use "sass:map";
+@use "sass:math";
+@use "sass:string";
+
+/// Casts a string into a number
+/// https://hugogiraudel.com/2014/01/15/sass-string-to-number/
+/// @author Hugo Giraudel
+/// @param {String | Number} $value - Value to be parsed
+/// @return {Number} - $value converted to a number
+@function to-number($value) {
+    @if type-of($value) == "number" {
+        @return $value;
+    } @else if type-of($value) != "string" {
+        @warn "Value for `to-number` should be a number or a string.";
+    }
+
+    $result: 0;
+    $digits: 0;
+    $minus: string.slice($value, 1, 1) == "-";
+    $numbers: (
+        "0": 0,
+        "1": 1,
+        "2": 2,
+        "3": 3,
+        "4": 4,
+        "5": 5,
+        "6": 6,
+        "7": 7,
+        "8": 8,
+        "9": 9,
+    );
+
+    @for $i from if($minus, 2, 1) through str-length($value) {
+        $character: string.slice($value, $i, $i);
+
+        @if not(index(map.keys($numbers), $character) or $character == ".") {
+            @return to-length(if($minus, -$result, $result), string.slice($value, $i));
+        }
+
+        @if $character == "." {
+            $digits: 1;
+        } @else if $digits == 0 {
+            $result: $result * 10 + map.get($numbers, $character);
+        } @else {
+            $digits: $digits * 10;
+            $result: $result + math.div(map.get($numbers, $character), $digits);
+        }
+    }
+
+    @return if($minus, -$result, $result);
+}
+
+/// Add `$unit` to `$value`
+/// @param {Number} $value - Value to add unit to
+/// @param {String} $unit - String representation of the unit
+/// @return {Number} - `$value` expressed in `$unit`
+@function to-length($value, $unit) {
+    $units: (
+        "px": 1px,
+        "cm": 1cm,
+        "mm": 1mm,
+        "%": 1%,
+        "ch": 1ch,
+        "pc": 1pc,
+        "in": 1in,
+        "em": 1em,
+        "rem": 1rem,
+        "pt": 1pt,
+        "ex": 1ex,
+        "vw": 1vw,
+        "vh": 1vh,
+        "vmin": 1vmin,
+        "vmax": 1vmax,
+    );
+
+    @if not index(map.keys($units), $unit) {
+        @warn "Invalid unit `#{$unit}`.";
+    }
+
+    @return $value * map.get($units, $unit);
+}
+
+/// Gjør en fargeverdi URL-safe, for eksempel til bruk i inline SVG
+/// @param {Color} $color - Sass fargetype. Kan være HEX, hsl, hsla, rgb eller rgba.
+/// @return {String} - input konvertert til en URL-safe HEX-verdi
+@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;
+}

package/src/core/jkl/_helpers.scss

@@ -0,0 +1,20 @@
+/// Gjør flexbox litt mindre verbos. Setter display: flex; med gitt align-items og justify-content.
+/// @param {String} $align-items [center] – settes på align-items
+/// @param {String} $justify-content [center] – settes på justify-content
+/// @output display: flex og angitt align-items og justify-content
+@mixin flex($align-items: center, $justify-content: center) {
+    display: flex;
+    align-items: $align-items;
+    justify-content: $justify-content;
+}
+
+/// Samle alt som har med posisjonering å gjøre i én mixin. Alle parameternavn matcher CSS-attributtet.
+/// @param {String} $position
+/// @param {String} $top [initial]
+/// @param {String} $left [initial]
+/// @param {String} $right [initial]
+/// @param {String} $bottom [initial]
+@mixin position($position, $top: initial, $left: initial, $right: initial, $bottom: initial) {
+    position: $position;
+    inset: $top $right $bottom $left;
+}

package/src/core/jkl/_index.scss

@@ -0,0 +1,18 @@
+@forward "colors" hide varslingsfarge;
+@forward "convert";
+@forward "helpers";
+@forward "motion";
+@forward "navigation";
+@forward "ornaments";
+@forward "reset";
+@forward "responsive-units";
+@forward "screenreader";
+@forward "screens";
+@forward "shadows";
+@forward "spacing" hide $spacing, $combinations, $positions;
+@forward "theme";
+@forward "tokens";
+@forward "legacy-tokens";
+@forward "typography" hide $text-styles;
+@forward "underline";
+@forward "z-index";

package/src/core/jkl/_legacy-tokens.scss

@@ -0,0 +1,22 @@
+// Do not edit directly
+// Generated on Tue, 10 Sep 2024 05:21:22 GMT
+
+$color-svart: #000000;
+$color-granitt: #1b1917;
+$color-skifer: #313030;
+$color-fjellgra: #444141;
+$color-stein: #636060;
+$color-svaberg: #c8c5c3;
+$color-varde: #e0dbd4;
+$color-dis: #ece9e5;
+$color-sand: #f4f2ef;
+$color-snohvit: #f9f9f9;
+$color-hvit: #ffffff;
+$color-suksess: #acd3b5;
+$color-suksess-dark: #94b79b;
+$color-feil: #f6b3b3;
+$color-feil-dark: #de9e9e;
+$color-info: #d3d3f6;
+$color-info-dark: #a9a9ca;
+$color-advarsel: #efdd9e;
+$color-advarsel-dark: #decc8d;

package/src/core/jkl/_motion.scss

@@ -0,0 +1,62 @@
+@use "sass:map";
+@use "sass:list";
+
+// Oppdater verdier i motion.ts også
+$_easings: (
+    "standard": ease,
+    "entrance": ease-out,
+    "exit": ease-in,
+    "easeInBounceOut": cubic-bezier(0, 0, 0.375, 1.17),
+    "focus": cubic-bezier(0.6, 0.2, 0.35, 1),
+);
+
+/// Hent en easing til bruk i animasjoner. Se også `timing`-funksjonen og `motion`-mixinen.
+/// @param {"standard" | "entrance" | "exit" | "easeInBounceOut" | "focus"} $name - Navn på easingen du ønsker verdien til
+/// @return {String} - easingverdi til bruk i animasjoner
+/// @see timing
+/// @see motion
+@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.';
+    }
+}
+
+// Oppdater verdier i motion.ts også
+$_timings: (
+    "energetic": 75ms,
+    "snappy": 100ms,
+    "productive": 150ms,
+    "polite": 200ms,
+    "expressive": 250ms,
+    "lazy": 400ms,
+);
+
+/// Hent en timing til bruk i animasjoner. Se også `easing`-funksjonen og `motion`-mixinen.
+/// @param {"energetic" | "snappy" | "productive" | "expressive" | "lazy"} $mode - Navn på timingen du ønsker verdien til
+/// @return {String} - timingverdi til bruk i animasjoner
+/// @see easing
+/// @see motion
+@function timing($mode, $timings: $_timings) {
+    @if map.has-key($timings, $mode) {
+        @return map.get($timings, $mode);
+    } @else {
+        @error 'Unable to find a timing named #{$mode} in our supported timings';
+    }
+}
+
+/// Setter transition-timing-function og transition-duration, for bruk i animasjoner.
+/// Se også `timing`- og `easing`-funksjonene.
+/// @param {"standard" | "entrance" | "exit" | "easeInBounceOut" | "focus"} $name [standard] - Navn på easingen du ønsker verdien til
+/// @param {"energetic" | "snappy" | "productive" | "expressive" | "lazy"} $mode [productive] - Navn på timingen du ønsker verdien til
+/// @param $properties - Kommaseparert liste over egenskapene du ønsker å animere
+/// @see easing
+/// @see timing
+@mixin motion($name: "standard", $mode: "productive", $properties...) {
+    transition-timing-function: easing($name);
+    transition-duration: timing($mode);
+    @if list.length($properties) > 0 {
+        transition-property: $properties;
+    }
+}

package/src/core/jkl/_navigation.scss

@@ -0,0 +1,9 @@
+/// Brukes for CSS som skal gjelde bare ved tastaturnavigasjon.
+/// Brukes typisk til ekstra tydelige fokus-stiler. Krever at
+/// `initTabListener()` fra core er kjørt. Se README til core.
+/// @content Innholdet plasseres i en selector som bare matcher dersom vi _ikke_ har data-mousenavigation eller data-touchnavigation på html-elementet.
+@mixin keyboard-navigation {
+    @at-root html:not([data-mousenavigation]):not([data-touchnavigation]) #{&} {
+        @content;
+    }
+}

package/src/core/jkl/_ornaments.scss

@@ -0,0 +1,26 @@
+@use "motion";
+
+@mixin chevron($size, $color, $weight: 0.125rem, $rotate: 0, $state: closed) {
+    box-sizing: border-box;
+    width: $size;
+    height: $size;
+
+    transform-origin: 26.33% 73.66%; // places origin in center of chevron
+    transform: rotate((-45 + $rotate) * 1deg); // default orientation is pointing down
+
+    border-left: $weight solid $color;
+    border-bottom: $weight solid $color;
+    transition: transform motion.timing("lazy") ease;
+}
+
+@mixin decorative($content) {
+    // Detaljer finnes her: https://github.com/fremtind/jokul/issues/2774#issuecomment-1056575107
+    content: $content; // Fallback for nettlesere som ikke støtter ny syntaks (Firefox, Safari)
+    content: $content / ""; // Tom alternativ tekst
+    alt: " "; // WebKit-alternativ, fases ut når varianten fra speccen er støttet
+}
+
+@mixin focus-outline($offset: 2px, $thickness: 2px) {
+    outline: $thickness solid var(--jkl-color-border-action);
+    outline-offset: $offset;
+}

package/src/core/jkl/_reset.scss

@@ -0,0 +1,43 @@
+@use "theme";
+
+/// En omfattende reset for alt av outlines og borders på interaktive elementer
+@mixin reset-outline {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
+
+    &:active,
+    &:hover,
+    &:focus {
+        outline: 0;
+        outline-style: none;
+    }
+
+    // Reset alt som er gjort over hvis brukeren har på forced-colors.
+    // Da mister vi box-shadow og er avhengig av at borders og outlines synes.
+    @include theme.forced-colors-mode {
+        outline: revert;
+        border-style: revert;
+        outline-style: revert;
+
+        &:active,
+        &:hover,
+        &:focus {
+            outline: revert;
+            outline-style: revert;
+        }
+    }
+}
+
+/// Removes increment and decrement buttons
+/// for number input fields.
+@mixin remove-inner-outer-button {
+    input[type="number"]::-webkit-outer-spin-button,
+    input[type="number"]::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+    }
+
+    input[type="number"] {
+        -moz-appearance: textfield;
+    }
+}

package/src/core/jkl/_responsive-units.scss

@@ -0,0 +1,30 @@
+@use "sass:math";
+@use "convert";
+
+/// Kalkuler riktig rem-verdi basert på en gitt pixelverdi
+/// @param {Number} $px-size - Pixelverdi, helst med unit
+/// @return {Number} - Pixelverdien konvertert til rem
+/// @example
+///     jkl.rem(16px);
+@function rem($px-size) {
+    @if $px-size == 0 {
+        @return 0;
+    }
+    $rem-size: math.div($px-size, 16px);
+    // Default font size on html element is 100%, equivalent to 16px;
+    @return convert.to-number(#{$rem-size}rem);
+}
+
+/// Calculate a responsive size value relative to a given screen size
+/// Will return a CSS rule that corresponds to the given pixel size at
+/// the given screen size and scales with changes in screen size
+/// @param {Number} $px-size - Size to calculate from, in px without unit
+/// @param {Number} $screen-width - Screen width to calculate from, in px without unit, default 1400
+/// @param {Number} $screen-height - Screen height to calculate from, in px without unit, default 900
+/// @return {Number} - Input expressed as a responsive value
+@function relative-size($px-size, $screen-width: 1400, $screen-height: 900) {
+    $hor-size: math.div($px-size, $screen-width) * 100 * 1vw;
+    $ver-size: math.div($px-size, $screen-height) * 100 * 1vh;
+
+    @return min(#{$hor-size}, #{$ver-size});
+}