@fremtind/jokul 0.1.1

package/src/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/src/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/src/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%);

package/src/core/jkl/_spacing.scss

@@ -0,0 +1,210 @@
+@use "sass:string";
+@use "sass:map";
+@use "sass:list";
+@use "screens";
+@use "tokens" as *;
+
+/// Tilsvarer 2px
+/// @deprecated Bruk heller $spacing-2
+/// @type Number
+$spacing-3xs: $spacing-2;
+
+/// Tilsvarer 4px
+/// @deprecated Bruk heller $spacing-4
+/// @type Number
+$spacing-2xs: $spacing-4;
+
+/// Tilsvarer 8px
+/// @deprecated Bruk heller $spacing-8
+/// @type Number
+$spacing-xs: $spacing-8;
+
+/// Tilsvarer 12px
+/// @deprecated Bruk heller $spacing-12
+/// @type Number
+$spacing-s: $spacing-12;
+
+/// Tilsvarer 16px
+/// @deprecated Bruk heller $spacing-16
+/// @type Number
+$spacing-m: $spacing-16;
+
+/// Tilsvarer 24px
+/// @deprecated Bruk heller $spacing-24
+/// @type Number
+$spacing-l: $spacing-24;
+
+/// Tilsvarer 40px
+/// @deprecated Bruk heller $spacing-40
+/// @type Number
+$spacing-xl: $spacing-40;
+
+/// Tilsvarer 64px
+/// @deprecated Bruk heller $spacing-64
+/// @type Number
+$spacing-2xl: $spacing-64;
+
+/// Tilsvarer 104px
+/// @deprecated Bruk heller $spacing-104
+/// @type Number
+$spacing-3xl: $spacing-104;
+
+/// Tilsvarer 168px
+/// @deprecated Bruk heller $spacing-168
+/// @type Number
+$spacing-4xl: $spacing-168;
+
+/// Lar deg gjøre oppslag på navnet uten `spacing`-prefix for å få ut rem-verdien
+/// @type Map
+$spacing: (
+    "2": $spacing-2,
+    "4": $spacing-4,
+    "8": $spacing-8,
+    "12": $spacing-12,
+    "16": $spacing-16,
+    "24": $spacing-24,
+    "32": $spacing-32,
+    "40": $spacing-40,
+    "64": $spacing-64,
+    "104": $spacing-104,
+    "168": $spacing-168,
+    // Gamle t-skjortestørrelser for kompatibilitet
+    "3xs": $spacing-3xs,
+    "2xs": $spacing-2xs,
+    "xs": $spacing-xs,
+    "s": $spacing-s,
+    "m": $spacing-m,
+    "l": $spacing-l,
+    "xl": $spacing-xl,
+    "2xl": $spacing-2xl,
+    "3xl": $spacing-3xl,
+    "4xl": $spacing-4xl,
+);
+
+/// Her defineres kombinasjoner av spacinger til bruk i nytteklasser for spacing.
+/// Nytteklasser for alle enkeltspacinger, samt kombinasjoner, i denne listen
+/// blir automatisk generert i core.css, med versjoner for alle posisjoner (top, right, etc.).
+/// @type Map
+$combinations: (
+    "2",
+    "4",
+    "8",
+    "12",
+    "16",
+    "24",
+    "32",
+    "40",
+    "64",
+    "104",
+    "168",
+    "16" "24",
+    "24" "40",
+    "24" "32",
+    "32" "40",
+    "40" "64",
+    "64" "104",
+    "104" "168",
+    "16" "16" "24",
+    "16" "24" "32",
+    "16" "24" "40",
+    "24" "24" "32",
+    "24" "24" "40",
+    "24" "32" "40",
+    "32" "32" "40",
+    "32" "40" "64",
+    "40" "40" "64",
+    "40" "64" "104",
+    "64" "64" "104",
+    "64" "104" "168",
+    "104" "104" "168"
+);
+
+/// Posisjoner som kan benyttes for spacing
+/// @type Map
+$positions: (top, bottom, left, right);
+
+/// Deler opp en streng i substrenger, gitt et tegn du vil bruke som avdeler.
+/// @param { string } $string En streng du vil dele opp
+/// @param { string } $delimiter [null] En string du vil bruke som avdeler, f.eks. komma
+/// @return { list } Returnerer en liste med substrenger
+/// @example
+/// splitString("24/40", "/"); // "24", "40"
+@function _split-string($string, $delimiter: null) {
+    // Returner en liste med uendret streng hvis ingen separator er satt, eller strengen er tom
+    @if not $delimiter or string.length($string) == 0 {
+        @return ($string);
+    }
+
+    // Finn index til separatoren
+    $delimiter-index: string.index($string, $delimiter);
+
+    // Returner en liste med uendret streng hvis ikke separatoren finnes i strengen
+    @if not $delimiter-index {
+        @return ($string);
+    }
+
+    $first-value: string.slice($string, 0, $delimiter-index - 1);
+    // Finn eventuelt flere substrenger ved å kjøre funksjonen rekursivt
+    $other-values: _split-string(string.slice($string, $delimiter-index + 1), $delimiter);
+
+    // Returner en kommaseparert liste over substrengene
+    @return list.join($first-value, $other-values, "comma");
+}
+
+/// Setter marginer ut fra et steg i spacing-skalaen
+/// @param {"2" | "4" | "8" | "12" | "16" | "24" | "32" | "40" | "64" | "104" | "168"} $spacing-step Et steg i spacingskalaen
+/// @param {"top" | "right" | "bottom" | "left"} $position En posisjon du vil sette spacingen i
+/// @output margin-<posisjon>: <verdi i spacing-skalaen>;
+@mixin _single-spacing($spacing-step, $position) {
+    @if $position and list.index($positions, $position) {
+        // Legg til bindestrek foran posisjonen for enklere interpolering
+        $position: "-#{$position}";
+    }
+
+    @if map.has-key($spacing, $spacing-step) {
+        margin#{$position}: map.get($spacing, $spacing-step);
+    } @else {
+        @error "Fant ikke \"#{$spacing-step}\" i våre spacing-verdier";
+    }
+}
+
+/// Gir deg marginer basert på stegene i spacing-skalaen.
+/// @param $steps Navnet på ett, to eller tre steg i spacing-skalaen, adskilt av "/".
+/// Stegene trer i kraft fra henholdsvis små, mellomstore og store skjermstørrelser i den rekkefølgen du angir dem.
+/// @param {"top" | "right" | "bottom" | "left"} $position Lar deg spesifisere margin for kun én av sidene
+/// @example
+/// .class {
+///     // Gir spacing-40 på små skjermer, og spacing-64 fra mellomstore skjermer
+///     @include jkl.spacing("40/64");
+/// }
+/// @example
+/// .class {
+///     // Gir spacing-40 på små skjermer, spacing-64 på mellomstore skjermer, og spacing-104 fra store skjermer
+///     @include jkl.spacing("40/64/104");
+/// }
+/// @example
+/// .class {
+///     @include jkl.spacing("16", "bottom");
+/// }
+@mixin spacing($steps, $position: null) {
+    $steps: _split-string($steps, "/");
+
+    @if list.length($steps) > 3 {
+        @error "Du kan ikke oppgi fler enn tre spacing-steg";
+    } @else if list.length($steps) < 1 {
+        @error "Du må oppgi minst ett spacing-steg";
+    }
+
+    @include _single-spacing(list.nth($steps, 1), $position);
+
+    @if list.length($steps) > 1 {
+        @include screens.from-medium-device {
+            @include _single-spacing(list.nth($steps, 2), $position);
+        }
+    }
+    @if list.length($steps) > 2 {
+        @include screens.from-large-device {
+            @include _single-spacing(list.nth($steps, 3), $position);
+        }
+    }
+}

package/src/core/jkl/_theme.scss

@@ -0,0 +1,144 @@
+@use "sass:string";
+@use "sass:color";
+@use "sass:list";
+
+/// Brukes til å sette CSS-variabler for bruk i lyst tema, typisk tekst- og
+/// bakgrunnsfarge. Se også dark-mode-variables.
+/// @content Settes på :root hvis brukeren har lyst tema, og på [data-theme="light"]
+/// @see dark-mode-variables
+/// @see forced-colors-mode
+@mixin light-mode-variables {
+    @media screen and (prefers-color-scheme: light) {
+        :root {
+            @content;
+        }
+    }
+
+    [data-theme="light"] {
+        @content;
+    }
+}
+
+/// Brukes til å sette CSS-variabler for bruk i mørkt tema, typisk tekst- og
+/// bakgrunnsfarge. Se også light-mode-variables.
+/// @content Settes på :root hvis brukeren har mørkt tema, og på [data-theme="dark"]
+/// @see light-mode-variables
+/// @see forced-colors-mode
+@mixin dark-mode-variables {
+    @media screen and (prefers-color-scheme: dark) {
+        :root {
+            @content;
+        }
+    }
+
+    [data-theme="dark"] {
+        @content;
+    }
+}
+
+/// Brukes til å sette CSS-variabler som skal gjelde i vanlig (ukompakt) modus.
+/// @deprecated Bruk heller jkl.comfortable-density, som skal brukes INNE I komponenten
+/// @content Settes på :root, [data-density="comfortable"], og [data-layout-density="comfortable"]
+@mixin comfortable-density-variables {
+    :root,
+    [data-layout-density="comfortable"],
+    [data-density="comfortable"] {
+        @content;
+    }
+}
+
+/// Brukes til å sette CSS-variabler som skal gjelde i kompakt modus.
+/// @deprecated Bruk heller jkl.compact-density, som skal brukes INNE I komponenten
+/// @content Settes på [data-density="compact"], og på [data-layout-density="compact"]
+@mixin compact-density-variables {
+    [data-layout-density="compact"],
+    [data-density="compact"] {
+        @content;
+    }
+}
+
+/// Brukes til å sette CSS-variabler inne i en komponent, og som skal gjelde i vanlig (ukompakt) modus.
+/// @content Settes på .jkl &, [data-density="comfortable"] &, og [data-layout-density="comfortable"] &
+@mixin comfortable-density {
+    .jkl &,
+    &[data-layout-density="comfortable"],
+    &[data-density="comfortable"],
+    [data-layout-density="comfortable"] &,
+    [data-density="comfortable"] & {
+        @content;
+    }
+}
+
+/// Brukes til å sette CSS-variabler inne i en komponent, og som skal gjelde i kompakt modus.
+/// @content Settes på [data-density="compact"] &, og på [data-layout-density="compact"] &
+@mixin compact-density {
+    &[data-layout-density="compact"],
+    &[data-density="compact"],
+    [data-layout-density="compact"] &,
+    [data-density="compact"] & {
+        @content;
+    }
+}
+
+/// Brukes til å overstyre stiler for bruk i Forced Colors-modus.
+/// Her vil du typisk legge til fallbacks for manglende box-shadow,
+/// som for eksempel `outline: revert;` og `border: revert;`,
+/// og eventuelle andre problemer som oppstår for brukere av høykontrasttemaer.
+/// Se https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
+/// og https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/
+/// @content Innholdet plasseres i et media query som matcher hvis høykontrasttema er i bruk
+/// @see forced-colors-svg-fallback
+/// @see light-mode-variables
+/// @see dark-mode-variables
+@mixin forced-colors-mode {
+    @media screen and (forced-colors: active) {
+        @content;
+    }
+}
+
+$_valid-forced-colors-text-values: (
+    "Canvas",
+    "CanvasText",
+    "LinkText",
+    "GrayText",
+    "Highlight",
+    "HighlightText",
+    "ButtonFace",
+    "ButtonText"
+);
+
+/// Hjelper for å sette riktig farge på SVGer i Chrome for brukere med Forced Color-modus.
+/// Se https://melanie-richards.com/blog/currentcolor-svg-hcm/ for detaljer
+/// @param {"Canvas" | "CanvasText" | "LinkText" | "GrayText" | "Highlight" | "HighlightText" | "ButtonFace" | "ButtonText"} $stroke - Definer hvilken systemfarge som skal brukes til stroke. Fargene har en forventet betydning for brukeren. Følg den semantiske betydningen til fargen, ikke velg fargen du selv synes "ser best ut".
+/// @param {"Canvas" | "CanvasText" | "LinkText" | "GrayText" | "Highlight" | "HighlightText" | "ButtonFace" | "ButtonText"} $fill [null] - Som $stroke, bare for fill. Valgfri.
+/// @output Setter angitte verdier på nåværende selector og dens svg og path children, inni et media query som treffer dersom forced-colors er aktiv.
+@mixin forced-colors-svg-fallback($stroke, $fill: null) {
+    @if not list.index($_valid-forced-colors-text-values, $stroke) {
+        @error "#{$stroke} will not be used for stroke in Forced Color mode. Valid options are: #{$_valid-forced-colors-text-values}. Use the correct color for your given context.";
+    }
+
+    @if $fill and not list.index($_valid-forced-colors-text-values, $fill) {
+        @error "#{$fill} will not be used for fill in Forced Color mode. Valid options are: null, #{$_valid-forced-colors-text-values}. Use the correct color for your given context.";
+    }
+
+    @media screen and (forced-colors: active) {
+        stroke: $stroke;
+        fill: $fill;
+
+        & svg,
+        & path {
+            stroke: $stroke;
+            fill: $fill;
+        }
+    }
+}
+
+/// Jøkul har en automatisk overstyring av animasjoner og transitions i denne modusen,
+/// men om du trenger å gjøre noe ekstra for brukere som ønsker redusert bevegelse
+/// kan du bruke denne mixinen for å plassere CSS inni riktig media query.
+/// @content Innholdet plasseres i et media query som matcher hvis brukeren foretrekker redusert bevegelse
+@mixin prefers-reduced-motion {
+    @media screen and (prefers-reduced-motion: reduce) {
+        @content;
+    }
+}