@fremtind/jokul 3.5.3 → 3.6.0

package/styles/components/file-input/file-input.scss

@@ -1,130 +0,0 @@
-@use "../../core/jkl";
-@use "../file";
-
-@include jkl.comfortable-density-variables {
-    @include jkl.declare-font-variables("jkl-file-input-drag", "heading-2");
-    @include jkl.declare-font-variables("jkl-file-size-hint", "small");
-
-    --jkl-file-input-dropzone-padding: #{jkl.$unit-30};
-    --jkl-file-input-dropzone-gap: #{jkl.$unit-30};
-    --jkl-file-cta-gap: #{jkl.$unit-30};
-    --jkl-file-cta-with-files-gap: #{jkl.$unit-15};
-    --jkl-file-list-gap: #{jkl.$unit-10};
-}
-
-@include jkl.compact-density-variables {
-    @include jkl.declare-font-variables("jkl-file-input-drag", "body");
-
-    --jkl-file-input-dropzone-padding: #{jkl.$unit-20};
-    --jkl-file-input-dropzone-gap: #{jkl.$unit-20};
-    --jkl-file-cta-gap: #{jkl.$unit-15};
-    --jkl-file-cta-with-files-gap: #{jkl.$unit-05};
-    --jkl-file-list-gap: #{jkl.$unit-10};
-}
-
-.jkl-file-input {
-    &__dropzone {
-        --border-color: var(--jkl-color-border-input);
-        --background-color: transparent;
-
-        border: var(--border-color) 1px dashed;
-        border-radius: jkl.rem(4px);
-        padding: var(--jkl-file-input-dropzone-padding);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        gap: var(--jkl-file-input-dropzone-gap);
-
-        @include jkl.motion("standard", "productive");
-        transition-property: background-color;
-        background-color: var(--background-color);
-
-        &--enter {
-            --border-color: var(--jkl-color-border-input-focus);
-            --background-color: var(--jkl-color-background-container-high);
-            border-style: solid;
-        }
-
-        &__drag-text {
-            @include jkl.use-font-variables("jkl-file-input-drag");
-
-            @include jkl.small-device {
-                display: none;
-            }
-        }
-    }
-
-    &__call-to-action {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        flex-wrap: nowrap;
-
-        &:has(:focus-visible) {
-            .jkl-button {
-                transform: scale(1.05);
-
-                @include jkl.focus-outline;
-
-                &:active {
-                    transform: scale(1);
-                }
-            }
-        }
-    }
-
-    &__dropzone-hint {
-        margin-top: jkl.$unit-30;
-    }
-
-    &--has-files &__dropzone-hint {
-        display: none;
-    }
-
-    &__max-size-text {
-        @include jkl.use-font-variables("jkl-file-size-hint");
-        color: var(--jkl-color-text-subdued);
-        margin-top: jkl.$unit-30;
-    }
-
-    &__files {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        display: flex;
-        flex-direction: column;
-        gap: var(--jkl-file-list-gap);
-    }
-
-    &--small {
-        .jkl-file-input__dropzone-hint {
-            margin: 0;
-            display: block;
-        }
-
-        .jkl-file-input__dropzone {
-            padding: jkl.$unit-20;
-            gap: jkl.$unit-20;
-            margin-bottom: jkl.$unit-20;
-            justify-content: flex-start;
-            flex-direction: row;
-            max-width: fit-content;
-        }
-
-        .jkl-file-input__call-to-action {
-            @include jkl.use-font-variables("jkl-file-size-hint");
-
-            gap: #{jkl.$unit-15};
-            flex-direction: row;
-            justify-content: flex-start;
-        }
-
-        .jkl-file-input__max-size-text {
-            margin-top: calc(-1 * #{jkl.$unit-15});
-            margin-bottom: jkl.$unit-20;
-        }
-    }
-}

package/styles/components/flex/_index.scss

@@ -1 +0,0 @@
-@forward "flex";

package/styles/components/flex/flex.scss

@@ -1,252 +0,0 @@
-@charset "UTF-8";
-@use "sass:math";
-@use "sass:map";
-@use "../../core/jkl";
-
-// ==========================================================================
-// 1. Konfigurasjon
-// ==========================================================================
-
-// Angir globale CSS custom properties for maksimale container-bredder.
-@layer jokul.components {
-    :root {
-        --container-m: 43.75rem;
-        --container-l: 60rem;
-        --container-xl: 75rem;
-        --container-2xl: 90rem;
-        --container-full: 100%;
-    }
-}
-
-$jokul-breakpoints: map.get(jkl.$tokens, "breakpoint");
-$jokul-spacing: map.get(jkl.$tokens, "semantic-spacing");
-
-// Map for å generere klasser for uniforme (jevnt fordelte) kolonner.
-// Nøkkelen (key) representerer antall elementer, og verdien (value) er hvor mange
-// av de 12 grid-kolonnene hvert element skal oppta.
-$uniform-layouts: (
-    "0": "auto",
-    // Automatisk bredde basert på innhold
-    "1": 12,
-    // 1 element i full bredde
-    "2": 6,
-    // 2 elementer, 50% bredde hver
-    "3": 4,
-    // 3 elementer, 33.3% bredde hver
-    "4": 3,
-    // 4 elementer, 25% bredde hver
-    "6": 2,
-    // 6 elementer, 16.6% bredde hver
-);
-
-// Map for å generere asymmetriske layout-klasser (f.eks. .s-2\.10).
-// Nøkkelen (key) er klassens suffiks, og verdien (value) angir bredden i antall
-// grid-kolonner for elementer på oddetallsplassering (1, 3, 5, ...).
-// Bredden for partallselementer beregnes automatisk (12 - verdi).
-$asymmetric-layouts: (
-    "2\\.10": 2,
-    "10\\.2": 10,
-    "3\\.9": 3,
-    "9\\.3": 9,
-    "4\\.8": 4,
-    "8\\.4": 8,
-    "5\\.7": 5,
-    "7\\.5": 7,
-);
-
-// Sass-map for å generere generiske hjelpeklasser (utility classes).
-// Hver nøkkel på toppnivå er en CSS-egenskap, og de nøstede map-ene
-// definerer klassenavn og tilhørende verdi.
-$utility-classes: (
-    "display": (inline-flex,
-    ),
-    "flex-wrap": (wrap-reverse,
-        nowrap,
-    ),
-    "flex-direction": (column,
-        column-reverse,
-        row-reverse,
-    ),
-    "text-align": (left,
-        center,
-        right,
-    ),
-    "align-items": (start,
-        center,
-        end,
-        baseline,
-        stretch,
-    ),
-    "align-content": (start,
-        center,
-        end,
-        stretch,
-        baseline,
-        space-around,
-        space-between,
-        space-evenly,
-    ),
-    "justify-content": (start,
-        center,
-        end,
-        space-around,
-        space-between,
-        space-evenly,
-    ),
-);
-
-// Map som definerer maksimale bredder for sentrerte containere (`.center-*`).
-// Brukes til å generere responsive breddebegrensninger.
-$containers: (
-    "small": var(--container-m),
-    "medium": var(--container-l),
-    "large": var(--container-xl),
-    "xl": var(--container-2xl),
-);
-
-// ==========================================================================
-// 2. Verktøy (Mixins)
-// ==========================================================================
-
-/// Mixin som genererer hjelpeklasser for de forskjellige egenskapene et
-/// flex-element kan ha. For eksempel vil man for `align-items`-egenskapen
-/// få generert ut hjelpeklasser som `.align-items-end`.
-/// @output Hjelpeklasser for de vanligste flex-egenskapene
-@mixin generate-utility-classes() {
-    @each $property, $values in $utility-classes {
-        @each $value in $values {
-            .#{$property}-#{$value} {
-                #{$property}: $value;
-            }
-        }
-    }
-}
-
-// Mixin for å generere responsive layout-klasser basert på $asymmetric-layouts og $uniform-layouts.
-@mixin generate-layout-classes($breakpoint) {
-
-    // --- Asymmetriske layouts ---
-    // Genererer klasser for layouts der oddetalls- og partalls-elementer har ulik bredde.
-    @each $layout, $odd-child-columns in $asymmetric-layouts {
-        $even-child-columns: 12 - $odd-child-columns;
-
-        .screen-#{$breakpoint}-#{$layout} {
-            > :where(:nth-child(odd)) {
-                --jkl-flex-layout: #{$odd-child-columns};
-            }
-
-            > :where(:nth-child(even)) {
-                --jkl-flex-layout: #{$even-child-columns};
-            }
-        }
-    }
-
-    // --- Uniforme layouts ---
-    // Genererer klasser for layouts der alle elementer har lik bredde.
-    @each $layout, $value in $uniform-layouts {
-        .screen-#{$breakpoint}-#{$layout} > * {
-            --jkl-flex-layout: #{$value};
-        }
-    }
-}
-
-
-// Mixin for å generere klasser for `row-gap` og `column-gap`.
-@mixin generate-gap-classes($breakpoint) {
-    @each $spacing, $value in $jokul-spacing {
-        .screen-#{$breakpoint}-row-gap-#{$spacing} {
-            row-gap: var(--jkl-spacing-#{$spacing});
-        }
-
-        .screen-#{$breakpoint}-col-gap-#{$spacing} {
-            column-gap: var(--jkl-spacing-#{$spacing});
-
-            // Setter en custom property for å kunne kalkulere nøyaktig kolonnebredde
-            // i `flex-basis`, justert for `column-gap`.
-            & > * {
-                --jkl-flex-gap: var(--jkl-spacing-#{$spacing});
-            }
-        }
-    }
-}
-
-// ==========================================================================
-// 3. Kjernestiler
-// ==========================================================================
-
-@layer jokul.components {
-
-    // Basisstil for alle flex-containere.
-    :is(.jkl-flex) {
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-    }
-
-    // Sørger for at direkte barn av .fill-elementer fyller tilgjengelig plass.
-    // :where brukes for å holde spesifisiteten lav.
-    :where(.fill > *) {
-        flex-grow: 1;
-    }
-
-    // Definerer standardoppførsel for alle direkte elementer av en `.flex`-container.
-    :where(.jkl-flex > *) {
-        --jkl-flex-gap: 0px; // Standard gap er null.
-        --jkl-flex-layout: auto; // Standard layout er automatisk bredde.
-
-        box-sizing: border-box;
-
-        // Kalkulerer `flex-basis` for å lage et grid-system som tar hensyn til `gap`.
-        // Formelen fordeler bredden basert på antall kolonner definert av `--jkl-flex-layout`.
-        flex-basis: calc((100% - (12 / var(--jkl-flex-layout) - 1) * var(--jkl-flex-gap)) / 12 * var(--jkl-flex-layout));
-
-        // Sørger for at elementene kan krympe, for å unngå at de flyter ut av containeren.
-        min-width: calc(var(--jkl-flex-layout) * 0px);
-        min-height: calc(var(--jkl-flex-layout) * 0px);
-    }
-
-    // Hindrer at elementer krymper når `flex-wrap: nowrap` er satt.
-    :where(.wrap-nowrap > *) {
-        flex-shrink: calc(var(--jkl-flex-layout) * 0);
-    }
-}
-
-// ==========================================================================
-// 4. CSS-generering
-// ==========================================================================
-
-@layer jokul.components {
-    @include generate-utility-classes;
-
-    // Stiler for sentrerte containere.
-    :is(.center-m, .center-l, .center-xl, .center-2xl) {
-        box-sizing: border-box;
-        margin-inline: auto;
-        width: calc(100% - var(--jkl-unit-50));
-    }
-
-    // Genererer responsive `max-width` for hver container-størrelse.
-    @each $size, $width in $containers {
-        @media (width >=#{map.get($jokul-breakpoints, $size)}) {
-            .center-#{$size} {
-                max-width: $width;
-            }
-        }
-    }
-
-    // Itererer gjennom alle definerte breakpoints for å generere responsive layout- og gap-klasser.
-    @each $breakpoint, $width in $jokul-breakpoints {
-        @if $breakpoint =="small" {
-            @include generate-layout-classes($breakpoint);
-            @include generate-gap-classes($breakpoint);
-        }
-
-        @else {
-            @media (width >=#{$width}) {
-                @include generate-layout-classes($breakpoint);
-                @include generate-gap-classes($breakpoint);
-            }
-        }
-    }
-}

package/styles/components/help/_index.scss

@@ -1,2 +0,0 @@
-@forward "help";
-@use "../icon/index" as icon;

package/styles/components/help/help.scss

@@ -1,47 +0,0 @@
-@use "../../core/jkl/index" as jkl;
-
-.jkl-help-trigger {
-    vertical-align: middle;
-    width: fit-content;
-    height: fit-content;
-}
-
-.jkl-help-popover {
-    max-width: 40ch;
-    padding: var(--jkl-unit-30);
-    margin: var(--jkl-unit-05);
-    inset: auto;
-    border: none;
-    background-color: var(--jkl-color-background-container-inverted);
-    color: var(--jkl-color-text-inverted);
-
-    header button {
-        display: none;
-    }
-
-    .title {
-        @include jkl.text-style("body") {
-            font-weight: bold;
-        }
-    }
-
-    &[data-position="top"] {
-        position-area: top center;
-        position-try: top, bottom, right, left;
-    }
-
-    &[data-position="bottom"] {
-        position-area: bottom center;
-        position-try: bottom, top, right, left;
-    }
-
-    &[data-position="left"] {
-        position-area: left center;
-        position-try: left, right, top, bottom;
-    }
-
-    &[data-position="right"] {
-        position-area: right center;
-        position-try: right, left, top, bottom;
-    }
-}

package/styles/components/icon/_base-styles.scss

@@ -1,21 +0,0 @@
-@charset "UTF-8";
-@use "../../core/jkl";
-
-/// Vi tilbyr dette som en mixin for å kunne være konsekvent i stilsettingen
-/// av ikoner også der man ikke kan bruke jkl-icon-klassen.
-/// @output Basestiler for Jøkul-ikoner
-@mixin base-styles {
-    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
-    font-variation-settings: "FILL" var(--jkl-icon-fill, 0),
-        "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
-    font-feature-settings: "liga";
-    -webkit-font-feature-settings: "liga";
-    font-size: var(--jkl-icon-size, #{jkl.rem(24px)});
-    font-weight: var(--jkl-icon-weight, #{jkl.$icon-weight-normal});
-    line-height: 1;
-    display: inline-block;
-    -webkit-font-smoothing: antialiased;
-
-    @include jkl.motion("standard", "productive");
-    transition-property: font-variation-settings, transform;
-}

package/styles/components/icon/_index.scss

@@ -1 +0,0 @@
-@forward "icon";

package/styles/components/icon/development/internal/icons-example-grid.scss

@@ -1,13 +0,0 @@
-.jkl-example-grid {
-    display: grid;
-    gap: 2rem 1rem;
-    width: 100%;
-}
-
-.jkl-example-grid--four-columns {
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-}
-
-.jkl-example-grid--two-columns {
-    grid-template-columns: 1fr 1fr;
-}

package/styles/components/icon/icon.scss

@@ -1,139 +0,0 @@
-@charset "UTF-8";
-@use "../../core/jkl";
-@use "./base-styles" as *;
-
-@layer jokul.theme {
-    @include jkl.light-mode-variables {
-        --jkl-icon-grade: 0;
-    }
-
-    @include jkl.dark-mode-variables {
-        --jkl-icon-grade: -25;
-    }
-}
-
-@layer jokul.components {
-    .jkl-icon {
-        --jkl-icon-fill: 0;
-
-        @include base-styles;
-
-        &--bold {
-            --jkl-icon-weight: #{jkl.$icon-weight-bold};
-        }
-
-        &--filled {
-            --jkl-icon-fill: 1;
-        }
-
-        &--medium {
-            --jkl-icon-opsz: 24;
-            --jkl-icon-size: #{jkl.rem(24px)};
-        }
-
-        &--small {
-            --jkl-icon-opsz: 20;
-            --jkl-icon-size: #{jkl.rem(20px)};
-        }
-
-        &--inherit {
-            --jkl-icon-opsz: 20;
-            --jkl-icon-size: 1.2em;
-        }
-
-        &--animated {
-            display: block;
-        }
-    }
-
-    .jkl-icon-red-cross {
-        --red-cross-circle: var(--jkl-color-background-alert-error);
-        --red-cross-path: var(--jkl-color-text-on-alert);
-
-        width: jkl.rem(24px);
-        height: jkl.rem(24px);
-
-        & path {
-            fill: var(--red-cross-path);
-        }
-
-        & circle {
-            fill: var(--red-cross-circle);
-        }
-    }
-
-    .jkl-icon-green-check {
-        --green-check-circle: var(--jkl-color-background-alert-success);
-        --green-check-path: var(--jkl-color-text-on-alert);
-
-        width: jkl.rem(24px);
-        height: jkl.rem(24px);
-
-        & path {
-            fill: var(--green-check-path);
-        }
-
-        & circle {
-            fill: var(--green-check-circle);
-        }
-    }
-
-    .jkl-animated-horizontal-arrows,
-    .jkl-animated-vertical-arrows {
-        overflow: hidden;
-        width: var(--jkl-icon-size, #{jkl.rem(24px)});
-        height: var(--jkl-icon-size, #{jkl.rem(24px)});
-
-        &__slider {
-            display: flex;
-
-            @include jkl.motion(standard, expressive);
-            transition-delay: calc(#{jkl.timing("expressive")} * (1 / 3));
-            transition-property: transform;
-        }
-
-        &__arrow {
-            flex-shrink: 0;
-        }
-    }
-
-    .jkl-animated-vertical-arrows__slider {
-        flex-direction: column;
-        height: calc(var(--jkl-icon-size, #{jkl.rem(24px)}) * 2);
-
-        &[data-show="up"] {
-            transform: translate3d(0, 0, 0);
-        }
-
-        &[data-show="down"] {
-            transform: translate3d(0, -50%, 0);
-        }
-    }
-
-    .jkl-animated-horizontal-arrows__slider {
-        flex-direction: row;
-        width: calc(var(--jkl-icon-size, #{jkl.rem(24px)}) * 2);
-
-        &[data-show="left"] {
-            transform: translate3d(0, 0, 0);
-        }
-
-        &[data-show="right"] {
-            transform: translate3d(-50%, 0, 0);
-        }
-    }
-
-    .jkl-icons-animated__plus {
-        @include jkl.motion("easeInBounceOut", "expressive");
-        transition-property: transform;
-        transform-origin: 50% 50%;
-
-        &--plus {
-            transform: rotate(0);
-        }
-
-        &--close {
-            transform: rotate(135deg);
-        }
-    }
-}

package/styles/components/icon-button/_index.scss

@@ -1 +0,0 @@
-@forward "icon-button";

package/styles/components/icon-button/icon-button.scss

@@ -1,38 +0,0 @@
-@charset "UTF-8";
-@use "../../core/jkl";
-
-@layer jokul.components {
-    .jkl-icon-button {
-        background-color: transparent;
-        cursor: pointer;
-        color: inherit;
-        position: relative;
-        transition-property: box-shadow;
-        padding: 0;
-
-        @include jkl.motion(focus, snappy);
-        @include jkl.reset-outline;
-
-        .jkl-icon {
-            display: flex;
-            align-items: center;
-
-            &--animated {
-                display: revert;
-            }
-        }
-
-        &:focus-visible {
-            @include jkl.focus-outline;
-        }
-
-        &:hover {
-            color: var(--jkl-color-text-interactive-hover);
-        }
-
-        @include jkl.forced-colors-mode {
-            border: none;
-            background: none;
-        }
-    }
-}

package/styles/components/image/_index.scss

@@ -1 +0,0 @@
-@forward "image";

package/styles/components/image/development/style.scss

@@ -1,9 +0,0 @@
-.static {
-    width: 100%;
-    aspect-ratio: 4/3;
-}
-
-.fluid {
-    width: 100%;
-    height: 25rem;
-}