@fremtind/jokul 3.6.0 → 3.7.0

package/styles/core/global/_top-layer.scss

@@ -0,0 +1,20 @@
+@use "../jkl";
+
+@layer jokul.global {
+    [popover] {
+        opacity: 0;
+        transition: opacity,
+            overlay allow-discrete,
+            display allow-discrete;
+
+        @include jkl.motion("standard", "productive");
+
+        &:popover-open {
+            opacity: 1;
+
+            @starting-style {
+                opacity: 0;
+            }
+        }
+    }
+}

package/styles/core/jkl/_colors.scss

@@ -0,0 +1,26 @@
+@use "sass:map";
+@use "./legacy" 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/styles/core/jkl/_convert.scss

@@ -0,0 +1,102 @@
+@use "sass:color";
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@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 meta.type-of($value) == "number" {
+        @return $value;
+    } @else if meta.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 string.length($value) {
+        $character: string.slice($value, $i, $i);
+
+        @if not(list.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 list.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 meta.type-of($color) == "color" and string.index(#{$color}, "#") == 1 {
+        $hex: string.slice(color.ie-hex-str($color), 4);
+        $converted-color: string.unquote("#{$hex}");
+
+        @return "%23" + $converted-color;
+    }
+
+    @return $color;
+}

package/styles/core/jkl/_helpers.scss

@@ -0,0 +1,26 @@
+/// 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/styles/core/jkl/_index.scss

@@ -0,0 +1,18 @@
+@forward "legacy";
+@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" hide $color-background-page, $color-border-subdued, $color-text-default, $color-text-subdued;
+@forward "typography" hide $text-styles;
+@forward "underline";
+@forward "z-index";

package/styles/core/jkl/_motion.scss

@@ -0,0 +1,63 @@
+@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/styles/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/styles/core/jkl/_ornaments.scss

@@ -0,0 +1,28 @@
+@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: 3px, $thickness: 3px) {
+    outline: $thickness solid var(--jkl-color-border-action);
+    outline-offset: $offset;
+}

package/styles/core/jkl/_reset.scss

@@ -0,0 +1,45 @@
+@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/styles/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});
+}

package/styles/core/jkl/_screenreader.scss

@@ -0,0 +1,59 @@
+/// Improved screen reader only CSS class
+/// @author Gaël Poupard
+/// licence https://codepen.io/ffoodd/pen/gwKZyq/license
+///  Based on Yahoo!'s technique
+/// @author Thierry Koblentz
+/// @link https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html
+/// 1.
+///  `clip` is deprecated but works everywhere
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/clip
+/// 2.
+///  `clip-path` is the future-proof version, but not very well supported yet
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
+/// @link http://caniuse.com/#search=clip-path
+/// @author Yvain Liechti
+/// @link https://twitter.com/ryuran78/status/778943389819604992
+/// 3.
+///  preventing text to be condensed
+/// @author J. Renée Beach
+/// @link https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+///  Drupal 8 goes with word-wrap: normal instead
+/// @link https://www.drupal.org/node/2045151
+/// @link http://cgit.drupalcode.org/drupal/commit/?id=5b847ea
+/// 4.
+///  !important is important
+///  Obviously you wanna hide something
+/// @author Harry Roberts
+/// @link https://csswizardry.com/2016/05/the-importance-of-important/
+@mixin screenreader-only {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+    clip-path: inset(50%) !important; /* 2 */
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important; /* 3 */
+}
+
+/// Use in conjunction with .sr-only to only display content when it's focused.
+///  Useful for skip links
+/// @link http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+///  Based on a HTML5 Boilerplate technique, included in Bootstrap
+///  Fixed a bug with position: static on iOS 10.0.2 + VoiceOver
+/// @author Sylvain Pigeard
+/// @link https://github.com/twbs/bootstrap/issues/20732
+@mixin screenreader-only-focusable {
+    &:focus,
+    &:active {
+        clip: auto !important;
+        clip-path: none !important;
+        height: auto !important;
+        margin: auto !important;
+        overflow: visible !important;
+        width: auto !important;
+        white-space: normal !important;
+    }
+}

package/styles/core/jkl/_screens.scss

@@ -0,0 +1,135 @@
+/// @type Number
+$breakpoint--medium: 680px;
+
+/// @type Number
+$breakpoint--large: 1200px;
+
+/// @type Number
+$breakpoint--xl: 1600px;
+
+/// Forenkler media queries som skal gjelde mellom to skjermbredder.
+/// Maksverdien er _eksklusiv_ (verdien vil bli $max - 1px).
+/// @content Plasseres i et media query med min-width lik $min og max-width lik $max - 1px
+/// @example
+///    .class {
+///        @include jkl.screen-between(42px, 420px) {
+///            display: none;
+///        }
+///    }
+@mixin screen-between($min, $max) {
+    @media (min-width: $min) and (max-width: #{$max - 1px}) {
+        @content;
+    }
+}
+
+/// Forenkler å skrive CSS som skal gjelde fra en viss pixelbredde og oppover.
+/// @content Plasseres i et media query med min-width lik $min
+/// @example
+///     .class {
+///         @include jkl.screen-from(42px) {
+///             display: none;
+///         }
+///     }
+@mixin screen-from($min) {
+    @media (min-width: $min) {
+        @content;
+    }
+}
+
+/// Forenkler å skrive CSS som skal gjelde opp til en viss pixelbredde
+/// @content Plasseres i et media query med max-width lik $max - 1
+/// @example
+///     .class {
+///         @include jkl.screen-to(375px) {
+///             display: none;
+///         }
+///     }
+@mixin screen-to($max) {
+    @media (width >= 0) and (max-width: #{$max - 1px}) {
+        @content;
+    }
+}
+
+/// Forenkler å skrive CSS som skal gjelde for hva Jøkul definerer som små skjermer.
+/// @content Plasseres i et media query for små skjermer
+/// @example
+///     .class {
+///         @include jkl.small-device {
+///             display: none;
+///         }
+///     }
+@mixin small-device {
+    @media (width >= 0) and (max-width: #{$breakpoint--medium - 1px}) {
+        @content;
+    }
+}
+
+/// Forenkler å skrive CSS som skal gjelde for hva Jøkul definerer som mellomstore skjermer.
+/// @content Plasseres i et media query for mellomstore skjermer
+/// @example
+///     .class {
+///         @include jkl.medium-device {
+///             display: none;
+///         }
+///     }
+@mixin medium-device {
+    @media (min-width: #{$breakpoint--medium}) and (max-width: #{$breakpoint--large - 1px}) {
+        @content;
+    }
+}
+
+/// Forenkler å skrive CSS som skal gjelde for hva Jøkul definerer som mellomstore skjermer _og større_
+/// @content Plasseres i et media query som gjelder mellomstore skjermer og oppover
+/// @example
+///     .class {
+///         @include jkl.from-medium-device {
+///             display: none;
+///         }
+///     }
+@mixin from-medium-device {
+    @media (min-width: #{$breakpoint--medium}) {
+        @content;
+    }
+}
+
+/// Forenkler å skrive CSS som skal gjelde for hva Jøkul definerer som store skjermer.
+/// @content Plasseres i et media query for store skjermer
+/// @example
+///     .class {
+///         @include jkl.large-device {
+///             display: none;
+///         }
+///     }
+@mixin large-device {
+    @media (min-width: #{$breakpoint--large}) and (max-width: #{$breakpoint--xl - 1px}) {
+        @content;
+    }
+}
+
+/// Forenkler å skrive CSS som skal gjelde for hva Jøkul definerer som store skjermer _og større_
+/// @content Plasseres i et media query som gjelder store skjermer og oppover
+/// @example
+///     .class {
+///         @include jkl.from-large-device {
+///             display: none;
+///         }
+///     }
+@mixin from-large-device {
+    @media (min-width: #{$breakpoint--large}) {
+        @content;
+    }
+}
+
+/// Forenkler å skrive CSS som skal gjelde for hva Jøkul definerer som ekstra store skjermer.
+/// @content Plasseres i et media query for ekstra store skjermer
+/// @example
+///     .class {
+///         @include jkl.xl-device {
+///             display: none;
+///         }
+///     }
+@mixin xl-device {
+    @media (min-width: #{$breakpoint--xl}) {
+        @content;
+    }
+}

package/styles/core/jkl/_shadows.scss

@@ -0,0 +1,25 @@
+@use "responsive-units" as ru;
+
+/// Skygge som indikerer at noe er klikkbart og vil ta deg til et annet sted
+/// @type List
+$shadow-navigation: 0 ru.rem(4px) ru.rem(15px) rgb(37 42 49 / 10%);
+
+/// Skygge som indikerer at pekeren er over noe sin er klikkbart og vil ta deg til et annet sted
+/// @type List
+$shadow-navigation--hover: 0 ru.rem(6px) ru.rem(25px) rgb(37 42 49 / 12%);
+
+/// Skygge som indikerer at noe er klikkbart og at klikk vil gjøre en endring på nåværende side
+/// @type List
+$shadow-task-card: 0 ru.rem(4px) ru.rem(12px) rgb(37 42 49 / 3%);
+
+/// @type List
+/// @deprecated Se tilgjengelige skygger i _shadows.scss
+$drop-shadow--small: 0 ru.rem(4px) ru.rem(8px) rgb(0 0 0 / 8%);
+
+/// @type List
+/// @deprecated Se tilgjengelige skygger i _shadows.scss
+$drop-shadow--medium: ru.rem(4px) ru.rem(4px) ru.rem(8px) rgb(0 0 0 / 8%);
+
+/// @type List
+/// @deprecated Se tilgjengelige skygger i _shadows.scss
+$drop-shadow--large: ru.rem(4px) ru.rem(6px) ru.rem(16px) rgb(0 0 0 / 15%);