@fremtind/jokul 3.5.3 → 3.6.0

package/styles/components/loader/loader.scss

@@ -1,139 +0,0 @@
-@charset "UTF-8";
-@use "sass:string";
-@use "../../core/jkl";
-
-$_loader-dot-size--large: 0.9em;
-$_loader-dot-size--medium: 0.35em;
-$_loader-dot-size--small: 0.25em;
-
-$_loader-spacing--large: 1.9em;
-$_loader-spacing--medium: 0.65em;
-$_loader-spacing--small: 0.3em;
-
-$_loader-animation-properties: 2500ms linear infinite;
-$_loader-left-animation-name: jkl-loader-left-spin-#{string.unique-id()};
-$_loader-middle-animation-name: jkl-loader-middle-spin-#{string.unique-id()};
-$_loader-right-animation-name: jkl-loader-right-spin-#{string.unique-id()};
-
-@layer jokul.components {
-    .jkl-loader {
-        display: flex;
-
-        &--inline {
-            display: inline-flex;
-        }
-
-        &__dot {
-            display: block;
-            transform-origin: center;
-            background-color: currentColor;
-            height: $_loader-dot-size--large;
-            width: $_loader-dot-size--large;
-            animation: $_loader-animation-properties;
-
-            &--left {
-                animation-name: $_loader-left-animation-name;
-                margin-right: $_loader-spacing--large
-                    * 0.9; // for visual balance
-            }
-
-            &--middle {
-                animation-name: $_loader-middle-animation-name;
-                margin-right: $_loader-spacing--large;
-            }
-
-            &--right {
-                animation-name: $_loader-right-animation-name;
-            }
-
-            @include jkl.forced-colors-mode {
-                background-color: CanvasText;
-            }
-        }
-
-        .jkl-button & > .jkl-loader__dot,
-        &--medium > .jkl-loader__dot {
-            height: $_loader-dot-size--medium;
-            width: $_loader-dot-size--medium;
-
-            &--left {
-                margin-right: $_loader-spacing--medium * 0.9;
-            }
-
-            &--middle {
-                margin-right: $_loader-spacing--medium;
-            }
-        }
-
-        &--small > .jkl-loader__dot {
-            height: $_loader-dot-size--small;
-            width: $_loader-dot-size--small;
-
-            &--left {
-                margin-right: $_loader-spacing--small * 0.9;
-            }
-
-            &--middle {
-                margin-right: $_loader-spacing--small;
-            }
-        }
-    }
-
-    @keyframes #{$_loader-left-animation-name} {
-        0% {
-            transform: rotate(0) scale(0);
-        }
-
-        30% {
-            transform: rotate(90deg) scale(1);
-        }
-
-        70% {
-            transform: rotate(180deg) scale(0);
-        }
-
-        100% {
-            transform: rotate(180deg) scale(0);
-        }
-    }
-
-    @keyframes #{$_loader-middle-animation-name} {
-        0% {
-            transform: rotate(20deg) scale(0);
-        }
-
-        10% {
-            transform: rotate(20deg) scale(0);
-        }
-
-        40% {
-            transform: rotate(110deg) scale(1.4);
-        }
-
-        85% {
-            transform: rotate(200deg) scale(0);
-        }
-
-        100% {
-            transform: rotate(200deg) scale(0);
-        }
-    }
-
-    @keyframes #{$_loader-right-animation-name} {
-        0% {
-            transform: rotate(40deg) scale(0);
-        }
-
-        20% {
-            transform: rotate(40deg) scale(0);
-        }
-
-        50% {
-            transform: rotate(130deg) scale(1);
-        }
-
-        100% {
-            transform: rotate(220deg) scale(0);
-        }
-    }
-}

package/styles/components/loader/skeleton-loader.scss

@@ -1,137 +0,0 @@
-@charset "UTF-8";
-@use "sass:string";
-@use "../../core/jkl";
-
-$_blink-animation-name: jkl-blink-#{string.unique-id()};
-
-@layer jokul.components {
-    @property --jkl-skeleton-sweeper-position {
-        syntax: "<percentage>";
-        initial-value: 0%;
-        inherits: true;
-    }
-
-    @keyframes --jkl-skeleton-sweep {
-        0%,
-        67% {
-            --jkl-skeleton-sweeper-position: 0%;
-        }
-
-        100% {
-            --jkl-skeleton-sweeper-position: calc(100% + var(--jkl-skeleton-sweeper-width));
-        }
-    }
-
-    .jkl-skeleton-animation {
-        --jkl-skeleton-element-color: var(--jkl-color-background-container-low);
-        --jkl-skeleton-sweep-duration: 4500ms;
-        --jkl-skeleton-sweeper-width: 40%;
-
-        mask-image: linear-gradient(to right, #000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)), transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width) / 2), #000 var(--jkl-skeleton-sweeper-position));
-        mask-size: 100dvi 100dvb;
-        mask-position: center;
-        animation: var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;
-    }
-
-    .jkl-skeleton-element {
-        border-radius: jkl.rem(2px);
-        background-color: var(--jkl-skeleton-element-color);
-
-        &--circle {
-            border-radius: 50%;
-        }
-
-        @include jkl.forced-colors-mode {
-            border: 1px solid CanvasText;
-            // Vi kan ikke bruke "gradient-trikset" for å skape den samme effekten,
-            // så vi må tenke annerledes. Bruk gjennomsiktighet for å indikere at
-            // noe skjer.
-            animation: 2s ease infinite $_blink-animation-name;
-        }
-    }
-
-    .jkl-skeleton-input {
-        display: flex;
-        flex-direction: column;
-        gap: jkl.$spacing-12;
-
-        &__checkbox {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-            gap: jkl.$spacing-8;
-        }
-
-        @include jkl.small-device {
-            gap: jkl.$spacing-8;
-        }
-
-        &--compact::after {
-            gap: jkl.$spacing-8;
-        }
-    }
-
-    .jkl-skeleton-table {
-        display: flex;
-        flex-direction: column;
-
-        &__header,
-        &__row {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            border-bottom: solid 1px var(--jkl-skeleton-element-color);
-        }
-
-        &__header {
-            padding: jkl.$spacing-12 jkl.$spacing-8;
-        }
-
-        &__row {
-            padding: jkl.$spacing-16 jkl.$spacing-8;
-        }
-
-        @include jkl.small-device {
-            &__header {
-                padding: jkl.$spacing-8 jkl.$spacing-4;
-            }
-
-            &__row {
-                padding: jkl.$spacing-12 jkl.$spacing-4;
-            }
-        }
-
-        &--compact::after {
-            &__header {
-                padding: jkl.$spacing-8 jkl.$spacing-4;
-            }
-
-            &__row {
-                padding: jkl.$spacing-12 jkl.$spacing-4;
-            }
-        }
-
-        @include jkl.forced-colors-mode {
-            // Vi kan ikke bruke "gradient-trikset" for å skape den samme effekten,
-            // så vi må tenke annerledes. Bruk gjennomsiktighet for å indikere at
-            // noe skjer.
-            animation: 2s ease-in-out infinite $_blink-animation-name;
-        }
-    }
-
-    @keyframes #{$_blink-animation-name} {
-        0% {
-            opacity: 1;
-        }
-
-        40%,
-        50% {
-            opacity: 0.3;
-        }
-
-        70%,
-        100% {
-            opacity: 1;
-        }
-    }
-}

package/styles/components/logo/_index.scss

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

package/styles/components/logo/development/styles.scss

@@ -1,9 +0,0 @@
-.logo-example {
-    width: 100%;
-    height: 100%;
-}
-
-.logo-stamp-example {
-    width: 100%;
-    max-width: 16rem;
-}

package/styles/components/logo/logo.scss

@@ -1,90 +0,0 @@
-@charset "UTF-8";
-@use "../../core/jkl";
-
-@layer jokul.components {
-    .jkl-logo {
-        color: var(--jkl-color-text-default);
-
-        // I valget mellom å følge merkevaren og å være lesbar velger vi å være lesbar.
-        @include jkl.forced-colors-svg-fallback($stroke: CanvasText,
-            $fill: CanvasText,
-        );
-
-        &__F {
-            /* Is connected to the viewbox of the logo, change at your own risk */
-            transform-origin: 30px 132px;
-
-            &-line {
-                /* Must be the same as the line x1 origin, change at your own risk */
-                transform-origin: 34.3px;
-            }
-        }
-
-        &__remtind {
-            opacity: 1;
-        }
-
-        &--symbol-only {
-            & .jkl-logo__F {
-                transform: rotate(45deg);
-
-                &-line {
-                    transform: scaleX(1.5);
-                }
-            }
-
-            & .jkl-logo__remtind {
-                transition-delay: 0ms;
-                opacity: 0;
-                transform: translateX(-5%);
-            }
-        }
-
-        &--animated {
-            & .jkl-logo__F {
-                transition: transform jkl.timing("expressive") jkl.timing("energetic") cubic-bezier(0.5, 0, 0.62, 1);
-            }
-
-            & .jkl-logo__F-line {
-                transition: transform jkl.timing("expressive") ease-in;
-            }
-
-            & .jkl-logo__remtind {
-                transition:
-                    opacity jkl.timing("expressive") jkl.timing("energetic") ease-in,
-                    transform jkl.timing("expressive") ease;
-            }
-        }
-    }
-
-    .jkl-logo--centered.jkl-logo--symbol-only {
-        & .jkl-logo__F {
-            transform: translateX(35%) rotate(45deg);
-        }
-    }
-
-    .jkl-logo-stamp {
-        color: var(--logo-stamp-color);
-
-        // I valget mellom å følge merkevaren og å være lesbar velger vi å være lesbar.
-        @include jkl.forced-colors-svg-fallback($stroke: CanvasText,
-            $fill: CanvasText,
-        );
-
-        &--animated {
-            .jkl-logo-stamp__text {
-                transform-origin: 256px 256px;
-                transition-timing-function: cubic-bezier(0.75, 0, 0, 1);
-                transition-duration: jkl.timing("productive");
-                transition-property: transform;
-            }
-
-            &[data-rotate="true"] {
-                .jkl-logo-stamp__text {
-                    transition-duration: 1500ms;
-                    transform: rotate(360deg);
-                }
-            }
-        }
-    }
-}

package/styles/components/menu/_index.scss

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

package/styles/components/menu/_menu-divider.scss

@@ -1,10 +0,0 @@
-@use "../../core/jkl";
-
-@layer jokul.components {
-    .jkl-menu-divider {
-        width: 100%;
-        margin-block: 0;
-        border: none;
-        border-bottom: jkl.rem(1px) solid var(--jkl-color-border-separator);
-    }
-}

package/styles/components/menu/_menu-item.scss

@@ -1,71 +0,0 @@
-@use "../../core/jkl";
-
-@layer jokul.components {
-    @include jkl.comfortable-density-variables {
-        --jkl-menu-item-height: #{jkl.rem(48px)};
-        --jkl-menu-item-padding: #{jkl.$unit-10} #{jkl.$unit-30};
-
-        @include jkl.declare-font-variables("jkl-menu-item", "body");
-    }
-
-    @include jkl.compact-density-variables {
-        --jkl-menu-item-height: jkl.rem(32px);
-        --jkl-menu-item-padding: #{jkl.$unit-05} #{jkl.$unit-15};
-
-        @include jkl.declare-font-variables("jkl-menu-item", "small");
-    }
-
-    .jkl-menu-item {
-        --background-color: var(--jkl-color-background-interactive);
-
-        background-color: var(--background-color);
-        color: var(--jkl-color-text-default);
-        cursor: pointer;
-        text-decoration: none;
-
-        box-sizing: border-box;
-        user-select: none;
-
-        @include jkl.use-font-variables("jkl-menu-item");
-        display: flex;
-        align-items: center;
-        gap: jkl.$unit-10;
-        width: 100%;
-        height: var(--jkl-menu-item-height);
-        padding: var(--jkl-menu-item-padding);
-
-        @include jkl.reset-outline;
-
-        &__content {
-            display: flex;
-            gap: jkl.$unit-05;
-            justify-content: flex-start;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            flex-grow: 1;
-            flex-shrink: 1;
-            max-width: 100%;
-        }
-
-        &__icon {
-            display: flex;
-            align-items: center;
-            flex-shrink: 0;
-        }
-
-        &__arrow {
-            display: flex;
-            align-items: center;
-        }
-
-        &__chevron {
-            flex-shrink: 0;
-        }
-
-        &:hover,
-        &:focus-visible {
-            --background-color: var(--jkl-color-background-interactive-hover);
-        }
-    }
-}

package/styles/components/menu/menu.scss

@@ -1,40 +0,0 @@
-@charset "UTF-8";
-@use "../../core/jkl";
-@use "menu-item";
-@use "menu-divider";
-
-@layer jokul.components {
-    @include jkl.light-mode-variables {
-        --jkl-menu-border-color: transparent;
-    }
-
-    @include jkl.dark-mode-variables {
-        --jkl-menu-border-color: var(--jkl-color-border-input-focus);
-    }
-
-    .jkl-menu {
-        background-color: var(--jkl-color-background-container-high);
-
-        width: 100%;
-        max-width: jkl.rem(336px);
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        flex-wrap: nowrap;
-        box-shadow: 0 jkl.rem(4px) jkl.rem(20px) rgb(49 48 48 / 20%);
-        border-radius: jkl.rem(2px);
-        border: 2px solid var(--jkl-menu-border-color);
-        z-index: jkl.$z-index--dropdown;
-
-        &:focus-visible {
-            outline: none;
-        }
-
-        & &[data-placement="bottom-start"] {
-            box-shadow:
-                rgb(0 0 0 / 20%) 0 -1px 2px 0,
-                rgb(0 0 0 / 14%) -1px 2px 2px 0,
-                rgb(0 0 0 / 12%) 3px 1px 5px 0;
-        }
-    }
-}

package/styles/components/message/_index.scss

@@ -1,2 +0,0 @@
-@forward "message";
-@use "../icon";

package/styles/components/message/message.scss

@@ -1,187 +0,0 @@
-@charset "UTF-8";
-@use "sass:string";
-@use "../../core/jkl";
-
-$_dismiss-animation-duration: jkl.timing("lazy");
-$_message-width: jkl.rem(560px);
-$_message-width--compact: jkl.rem(440px);
-
-$_dismiss-animation-name: jkl-dismiss-#{string.unique-id()};
-
-@include jkl.comfortable-density-variables {
-    @include jkl.declare-font-variables("jkl-message-content", "body");
-    @include jkl.declare-font-variables("jkl-message-title", "heading-4");
-
-    --jkl-message-icon-size: #{jkl.rem(24px)};
-    --jkl-message-icon-left: #{jkl.rem(16px)};
-    --jkl-message-icon-top: #{jkl.rem(24px)};
-    --jkl-message-title-margin: 0 0 #{jkl.$unit-05} 0;
-    --jkl-message-dismiss-button-size: #{jkl.rem(44px)};
-    --jkl-message-gap: #{jkl.$unit-15};
-    --jkl-message-padding: #{jkl.$unit-20} #{jkl.$unit-15};
-
-    @include jkl.from-medium-device {
-        --jkl-message-gap: #{jkl.$unit-20};
-        --jkl-message-padding: #{jkl.$unit-30} #{jkl.$unit-20};
-    }
-}
-
-@include jkl.compact-density-variables {
-    @include jkl.declare-font-variables("jkl-message-content", "small");
-    @include jkl.declare-font-variables("jkl-message-title", "heading-5");
-
-    --jkl-message-icon-size: #{jkl.rem(20px)};
-    --jkl-message-icon-left: #{jkl.rem(6px)};
-    --jkl-message-icon-top: #{jkl.rem(14px)};
-    --jkl-message-dismiss-button-size: #{jkl.rem(32px)};
-    --jkl-message-gap: #{jkl.$unit-10};
-    --jkl-message-padding: #{jkl.$unit-15} #{jkl.$unit-10};
-}
-
-.jkl-message {
-    --background-color: var(--jkl-color-background-alert-neutral);
-    --text-color: var(--jkl-color-text-on-alert);
-
-    width: 100%;
-    max-width: $_message-width;
-    padding: var(--jkl-message-padding);
-    background-color: var(--background-color);
-    color: var(--text-color);
-    border-radius: jkl.rem(4px);
-    box-sizing: border-box;
-
-    display: grid;
-    align-items: start;
-    grid-template-areas: "icon content dismiss";
-    grid-template-columns: auto 1fr auto;
-
-    &__icon {
-        grid-area: icon;
-        width: var(--jkl-message-icon-size);
-        margin-right: var(--jkl-message-gap);
-
-        @include jkl.forced-colors-svg-fallback($stroke: CanvasText);
-    }
-
-    &__content {
-        grid-area: content;
-    }
-
-    &__message {
-        @include jkl.use-font-variables("jkl-message-content");
-
-        margin-top: jkl.rem(-2px); // Offset for å aligne med ikon hvis uten tittel.
-    }
-
-    &__title {
-        @include jkl.use-font-variables("jkl-message-title");
-        margin: var(--jkl-message-title-margin);
-
-        & ~ .jkl-message__message {
-            margin-top: 0; // Unset offset satt for å aligne med ikon hvis uten tittel.
-        }
-    }
-
-    &__dismiss-button {
-        grid-area: dismiss;
-        justify-self: end;
-        position: relative;
-
-        background-color: transparent;
-        padding: 0;
-        cursor: pointer;
-
-        color: inherit;
-
-        display: grid;
-        place-content: center;
-
-        @include jkl.reset-outline;
-        @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
-
-        @include jkl.forced-colors-mode {
-            background-color: ButtonFace;
-        }
-
-        // Sørg for å ha en stor nok touch target.
-        &::after {
-            content: "";
-            position: absolute;
-            display: block;
-            width: var(--jkl-message-dismiss-button-size);
-            height: var(--jkl-message-dismiss-button-size);
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-        }
-
-        &:hover {
-            color: var(--jkl-color-text-interactive-hover);
-
-            @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
-        }
-
-        &:focus-visible {
-            @include jkl.focus-outline;
-        }
-    }
-
-    &--full {
-        max-width: 100%;
-    }
-
-    &--info {
-        --background-color: var(--jkl-color-background-alert-info);
-    }
-
-    &--warning {
-        --background-color: var(--jkl-color-background-alert-warning);
-    }
-
-    &--error {
-        --background-color: var(--jkl-color-background-alert-error);
-    }
-
-    &--success {
-        --background-color: var(--jkl-color-background-alert-success);
-    }
-
-    &--dismissed {
-        animation: $_dismiss-animation-name $_dismiss-animation-duration ease-in-out forwards;
-        transition: visibility 0ms $_dismiss-animation-duration;
-        visibility: hidden;
-    }
-
-    @include jkl.forced-colors-mode {
-        border: 2px solid CanvasText;
-
-        &--info {
-            border-style: dotted;
-        }
-
-        &--warning {
-            border-style: dashed;
-        }
-
-        &--error {
-            border-style: double;
-            border-width: 4px;
-        }
-    }
-}
-
-@keyframes #{$_dismiss-animation-name} {
-    from {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-    }
-
-    to {
-        opacity: 0;
-        transform: translate3d(0, -50%, 0);
-    }
-}
-
-.jkl-form-error-message {
-    padding-bottom: jkl.$unit-50;
-}

package/styles/components/modal/_index.scss

@@ -1,3 +0,0 @@
-@forward "modal";
-@use "../icon" as icon;
-@use "../icon-button" as icon-button;