@fremtind/jokul 0.71.2 → 1.0.0

package/styles/components/accordion/accordion.css

@@ -1,189 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
- */
-:root,
-[data-layout-density=comfortable],
-[data-density=comfortable] {
-  --jkl-accordion-title-padding: var(--jkl-spacing-16) 3rem var(
-          --jkl-spacing-16
-      ) var(--jkl-spacing-16);
-  --jkl-accordion-arrow-top: 1.25rem;
-  --jkl-accordion-arrow-right: var(--jkl-spacing-12);
-  --jkl-accordion-content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16)
-      var(--jkl-spacing-16);
-  --jkl-accordion-icon-opsz: 24;
-  --jkl-accordion-icon-size: 1.5rem;
-  --title-font-size: var(--jkl-body-font-size);
-  --title-line-height: var(--jkl-body-line-height);
-  --title-font-weight: var(--jkl-body-font-weight);
-  --content-font-size: var(--jkl-body-font-size);
-  --content-line-height: var(--jkl-body-line-height);
-  --content-font-weight: var(--jkl-body-font-weight);
-}
-@media (width >= 0) and (max-width: 679px) {
-  :root,
-  [data-layout-density=comfortable],
-  [data-density=comfortable] {
-    --jkl-accordion-title-padding: var(--jkl-spacing-12) 2.75rem var(
-            --jkl-spacing-12
-        ) var(--jkl-spacing-12);
-    --jkl-accordion-content-padding: var(--jkl-spacing-8)
-        var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12);
-    --jkl-accordion-arrow-top: 1.4375rem;
-  }
-}
-
-[data-layout-density=compact],
-[data-density=compact] {
-  --jkl-accordion-title-padding: var(--jkl-spacing-8) 2rem var(
-          --jkl-spacing-8
-      ) var(--jkl-spacing-8);
-  --jkl-accordion-arrow-top: var(--jkl-spacing-8);
-  --jkl-accordion-arrow-right: var(--jkl-spacing-4);
-  --jkl-accordion-content-padding: var(--jkl-spacing-8);
-  --jkl-accordion-icon-opsz: 20;
-  --jkl-accordion-icon-size: 1.25rem;
-  --title-font-size: var(--jkl-small-font-size);
-  --title-line-height: var(--jkl-small-line-height);
-  --title-font-weight: var(--jkl-small-font-weight);
-  --content-font-size: var(--jkl-small-font-size);
-  --content-line-height: var(--jkl-small-line-height);
-  --content-font-weight: var(--jkl-small-font-weight);
-}
-
-.jkl-accordion {
-  width: 100%;
-}
-
-.jkl-accordion-item {
-  --background: transparent;
-  --text-color: var(--jkl-color-text-default);
-  --title-text-color: var(--jkl-color-text-interactive);
-  --border-color: var(--jkl-color-border-separator);
-  --jkl-icon-opsz: var(--jkl-accordion-icon-opsz);
-  --jkl-icon-size: var(--jkl-accordion-icon-size);
-  background-color: var(--background);
-  color: var(--text-color);
-  border-bottom: 0.0625rem solid var(--border-color);
-  transition-timing-function: ease;
-  transition-duration: 100ms;
-  transition-property: border-color;
-}
-.jkl-accordion-item:hover {
-  --border-color: var(--jkl-color-border-separator-hover);
-}
-.jkl-accordion-item:hover:not(:first-child) {
-  border-top: 0.0625rem solid var(--border-color);
-}
-.jkl-accordion-item:has(+ [open]), .jkl-accordion-item:has(+ :hover) {
-  border-bottom: none;
-}
-.jkl-accordion-item[open] {
-  --background: var(--jkl-color-background-container-high);
-  border-top: 0.0625rem solid var(--border-color);
-}
-.jkl-accordion-item[open] .jkl-accordion-item__title {
-  --jkl-icon-weight: 500;
-  font-weight: 700;
-  letter-spacing: -0.014em;
-}
-.jkl-accordion-item__title {
-  font-size: var(--title-font-size);
-  line-height: var(--title-line-height);
-  font-weight: var(--title-font-weight);
-  cursor: pointer;
-  color: var(--title-text-color);
-  list-style: none;
-  background-color: transparent;
-  position: relative;
-  padding: var(--jkl-accordion-title-padding);
-  text-align: left;
-  width: 100%;
-  box-sizing: border-box;
-}
-.jkl-accordion-item__title {
-  outline: 0;
-  border-style: none;
-  outline-style: none;
-}
-.jkl-accordion-item__title:active, .jkl-accordion-item__title:hover, .jkl-accordion-item__title:focus {
-  outline: 0;
-  outline-style: none;
-}
-@media screen and (forced-colors: active) {
-  .jkl-accordion-item__title {
-    outline: revert;
-    border-style: revert;
-    outline-style: revert;
-  }
-  .jkl-accordion-item__title:active, .jkl-accordion-item__title:hover, .jkl-accordion-item__title:focus {
-    outline: revert;
-    outline-style: revert;
-  }
-}
-.jkl-accordion-item__title::-webkit-details-marker {
-  display: none;
-}
-.jkl-accordion-item__title:hover {
-  --title-text-color: var(--jkl-color-text-interactive-hover);
-}
-.jkl-accordion-item__title:hover .jkl-accordion-item__arrow {
-  translate: 0 0.25rem;
-}
-.jkl-accordion-item__title:focus-visible {
-  outline: 3px solid var(--jkl-color-border-action);
-  outline-offset: 0;
-}
-.jkl-accordion-item__arrow {
-  pointer-events: none;
-  position: absolute;
-  right: var(--jkl-accordion-arrow-right);
-  top: var(--jkl-accordion-arrow-top);
-  transition-timing-function: ease;
-  transition-duration: 100ms;
-  transition-property: translate;
-}
-@media screen and (forced-colors: active) {
-  .jkl-accordion-item__arrow {
-    stroke: ButtonText;
-    fill: ButtonText;
-  }
-  .jkl-accordion-item__arrow svg, .jkl-accordion-item__arrow path {
-    stroke: ButtonText;
-    fill: ButtonText;
-  }
-}
-.jkl-accordion-item__content-wrapper {
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: height;
-}
-.jkl-accordion-item__content {
-  font-size: var(--content-font-size);
-  line-height: var(--content-line-height);
-  font-weight: var(--content-font-weight);
-  height: auto;
-  padding: var(--jkl-accordion-content-padding);
-}
-@media screen and (forced-colors: active) {
-  .jkl-accordion-item:nth-child(n) {
-    border-top: 0.125rem solid ButtonText;
-  }
-  .jkl-accordion-item:nth-child(n):hover {
-    border-top: 0.125rem solid ButtonText;
-  }
-  .jkl-accordion-item:nth-child(n):hover + .jkl-accordion-item {
-    border-top: 0.125rem solid ButtonText;
-  }
-  .jkl-accordion-item:last-child {
-    border-bottom: 0.125rem solid ButtonText;
-  }
-  .jkl-accordion-item:last-child:hover {
-    border-bottom: 0.125rem solid ButtonText;
-  }
-  .jkl-accordion-item__title {
-    background-color: ButtonFace;
-    outline: revert;
-  }
-}

package/styles/components/accordion/accordion.min.css

@@ -1,7 +0,0 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-accordion-title-padding:var(--jkl-spacing-16) 3rem var(
-          --jkl-spacing-16
-      ) var(--jkl-spacing-16);--jkl-accordion-arrow-top:1.25rem;--jkl-accordion-arrow-right:var(--jkl-spacing-12);--jkl-accordion-content-padding:var(--jkl-spacing-8) var(--jkl-spacing-16) var(--jkl-spacing-16);--jkl-accordion-icon-opsz:24;--jkl-accordion-icon-size:1.5rem;--title-font-size:var(--jkl-body-font-size);--title-line-height:var(--jkl-body-line-height);--title-font-weight:var(--jkl-body-font-weight);--content-font-size:var(--jkl-body-font-size);--content-line-height:var(--jkl-body-line-height);--content-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-accordion-title-padding:var(--jkl-spacing-12) 2.75rem var(
-            --jkl-spacing-12
-        ) var(--jkl-spacing-12);--jkl-accordion-content-padding:var(--jkl-spacing-8) var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12);--jkl-accordion-arrow-top:1.4375rem}}[data-density=compact],[data-layout-density=compact]{--jkl-accordion-title-padding:var(--jkl-spacing-8) 2rem var(
-          --jkl-spacing-8
-      ) var(--jkl-spacing-8);--jkl-accordion-arrow-top:var(--jkl-spacing-8);--jkl-accordion-arrow-right:var(--jkl-spacing-4);--jkl-accordion-content-padding:var(--jkl-spacing-8);--jkl-accordion-icon-opsz:20;--jkl-accordion-icon-size:1.25rem;--title-font-size:var(--jkl-small-font-size);--title-line-height:var(--jkl-small-line-height);--title-font-weight:var(--jkl-small-font-weight);--content-font-size:var(--jkl-small-font-size);--content-line-height:var(--jkl-small-line-height);--content-font-weight:var(--jkl-small-font-weight)}.jkl-accordion{width:100%}.jkl-accordion-item{--background:#0000;--text-color:var(--jkl-color-text-default);--title-text-color:var(--jkl-color-text-interactive);--border-color:var(--jkl-color-border-separator);--jkl-icon-opsz:var(--jkl-accordion-icon-opsz);--jkl-icon-size:var(--jkl-accordion-icon-size);background-color:var(--background);border-bottom:.0625rem solid var(--border-color);color:var(--text-color);transition-duration:.1s;transition-property:border-color;transition-timing-function:ease}.jkl-accordion-item:hover{--border-color:var(--jkl-color-border-separator-hover)}.jkl-accordion-item:hover:not(:first-child){border-top:.0625rem solid var(--border-color)}.jkl-accordion-item:has(+:hover),.jkl-accordion-item:has(+[open]){border-bottom:none}.jkl-accordion-item[open]{--background:var(--jkl-color-background-container-high);border-top:.0625rem solid var(--border-color)}.jkl-accordion-item[open] .jkl-accordion-item__title{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-accordion-item__title{background-color:initial;border-style:none;box-sizing:border-box;color:var(--title-text-color);cursor:pointer;font-size:var(--title-font-size);font-weight:var(--title-font-weight);line-height:var(--title-line-height);list-style:none;padding:var(--jkl-accordion-title-padding);position:relative;text-align:left;width:100%}.jkl-accordion-item__title,.jkl-accordion-item__title:active,.jkl-accordion-item__title:focus,.jkl-accordion-item__title:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-accordion-item__title{border-style:revert}.jkl-accordion-item__title,.jkl-accordion-item__title:active,.jkl-accordion-item__title:focus,.jkl-accordion-item__title:hover{outline:revert;outline-style:revert}}.jkl-accordion-item__title::-webkit-details-marker{display:none}.jkl-accordion-item__title:hover{--title-text-color:var(--jkl-color-text-interactive-hover)}.jkl-accordion-item__title:hover .jkl-accordion-item__arrow{translate:0 .25rem}.jkl-accordion-item__title:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-accordion-item__arrow{pointer-events:none;position:absolute;right:var(--jkl-accordion-arrow-right);top:var(--jkl-accordion-arrow-top);transition-duration:.1s;transition-property:translate;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-accordion-item__arrow,.jkl-accordion-item__arrow path,.jkl-accordion-item__arrow svg{stroke:ButtonText;fill:ButtonText}}.jkl-accordion-item__content-wrapper{transition-duration:.15s;transition-property:height;transition-timing-function:ease}.jkl-accordion-item__content{font-size:var(--content-font-size);font-weight:var(--content-font-weight);height:auto;line-height:var(--content-line-height);padding:var(--jkl-accordion-content-padding)}@media screen and (forced-colors:active){.jkl-accordion-item:nth-child(n),.jkl-accordion-item:nth-child(n):hover,.jkl-accordion-item:nth-child(n):hover+.jkl-accordion-item{border-top:.125rem solid ButtonText}.jkl-accordion-item:last-child,.jkl-accordion-item:last-child:hover{border-bottom:.125rem solid ButtonText}.jkl-accordion-item__title{background-color:ButtonFace;outline:revert}}

package/styles/components/accordion/accordion.scss

@@ -1,168 +0,0 @@
-@charset "UTF-8";
-@use "../../core/jkl";
-
-@include jkl.comfortable-density-variables {
-    --jkl-accordion-title-padding: var(--jkl-spacing-16) #{jkl.rem(48px)} var(
-            --jkl-spacing-16
-        ) var(--jkl-spacing-16);
-    --jkl-accordion-arrow-top: #{jkl.rem(20px)};
-    --jkl-accordion-arrow-right: var(--jkl-spacing-12);
-    --jkl-accordion-content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16)
-        var(--jkl-spacing-16);
-    --jkl-accordion-icon-opsz: 24;
-    --jkl-accordion-icon-size: 1.5rem;
-
-    @include jkl.declare-font-variables("title", "body");
-    @include jkl.declare-font-variables("content", "body");
-
-    @include jkl.small-device {
-        --jkl-accordion-title-padding: var(--jkl-spacing-12) #{jkl.rem(44px)} var(
-                --jkl-spacing-12
-            ) var(--jkl-spacing-12);
-        --jkl-accordion-content-padding: var(--jkl-spacing-8)
-            var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12);
-        --jkl-accordion-arrow-top: #{jkl.rem(23px)};
-    }
-}
-
-@include jkl.compact-density-variables {
-    --jkl-accordion-title-padding: var(--jkl-spacing-8) #{jkl.rem(32px)} var(
-            --jkl-spacing-8
-        ) var(--jkl-spacing-8);
-    --jkl-accordion-arrow-top: var(--jkl-spacing-8);
-    --jkl-accordion-arrow-right: var(--jkl-spacing-4);
-    --jkl-accordion-content-padding: var(--jkl-spacing-8);
-    --jkl-accordion-icon-opsz: 20;
-    --jkl-accordion-icon-size: 1.25rem;
-
-    @include jkl.declare-font-variables("title", "small");
-    @include jkl.declare-font-variables("content", "small");
-}
-
-/// @deprecated Denne komponenten bør ikke brukes lenger, og vil ikke bli oppdatert.
-/// Bruk heller komponenten `Expandable`
-.jkl-accordion {
-    width: 100%;
-}
-
-.jkl-accordion-item {
-    --background: transparent;
-    --text-color: var(--jkl-color-text-default);
-    --title-text-color: var(--jkl-color-text-interactive);
-    --border-color: var(--jkl-color-border-separator);
-    --jkl-icon-opsz: var(--jkl-accordion-icon-opsz);
-    --jkl-icon-size: var(--jkl-accordion-icon-size);
-
-    background-color: var(--background);
-    color: var(--text-color);
-    border-bottom: jkl.rem(1px) solid var(--border-color);
-
-    @include jkl.motion("standard", "snappy", border-color);
-
-    &:hover {
-        --border-color: var(--jkl-color-border-separator-hover);
-
-        &:not(:first-child) {
-            border-top: jkl.rem(1px) solid var(--border-color);
-        }
-    }
-
-    &:has(+ [open]),
-    &:has(+ :hover) {
-        border-bottom: none;
-    }
-
-    &[open] {
-        --background: var(--jkl-color-background-container-high);
-        border-top: jkl.rem(1px) solid var(--border-color);
-
-        .jkl-accordion-item__title {
-            @include jkl.no-grow-bold;
-        }
-    }
-
-    &__title {
-        @include jkl.use-font-variables("title");
-
-        cursor: pointer;
-        color: var(--title-text-color);
-        list-style: none;
-        background-color: transparent;
-        position: relative;
-        padding: var(--jkl-accordion-title-padding);
-        text-align: left;
-        width: 100%;
-        box-sizing: border-box;
-
-        @include jkl.reset-outline;
-
-        &::-webkit-details-marker {
-            display: none;
-        }
-
-        &:hover {
-            --title-text-color: var(--jkl-color-text-interactive-hover);
-
-            .jkl-accordion-item__arrow {
-                translate: 0 jkl.rem(4px);
-            }
-        }
-
-        &:focus-visible {
-            @include jkl.focus-outline($offset: 0);
-        }
-    }
-
-    &__arrow {
-        pointer-events: none;
-        position: absolute;
-        right: var(--jkl-accordion-arrow-right);
-        top: var(--jkl-accordion-arrow-top);
-
-        @include jkl.motion("standard", "snappy");
-        transition-property: translate;
-
-        @include jkl.forced-colors-svg-fallback(
-            $stroke: ButtonText,
-            $fill: ButtonText
-        );
-    }
-
-    &__content-wrapper {
-        @include jkl.motion;
-        transition-property: height;
-    }
-
-    &__content {
-        @include jkl.use-font-variables("content");
-        height: auto;
-        padding: var(--jkl-accordion-content-padding);
-    }
-
-    @include jkl.forced-colors-mode {
-        &:nth-child(n) {
-            border-top: jkl.rem(2px) solid ButtonText;
-
-            &:hover {
-                border-top: jkl.rem(2px) solid ButtonText;
-
-                + .jkl-accordion-item {
-                    border-top: jkl.rem(2px) solid ButtonText;
-                }
-            }
-        }
-
-        &:last-child {
-            border-bottom: jkl.rem(2px) solid ButtonText;
-
-            &:hover {
-                border-bottom: jkl.rem(2px) solid ButtonText;
-            }
-        }
-
-        &__title {
-            background-color: ButtonFace;
-            outline: revert;
-        }
-    }
-}

package/styles/components/card/_info-card.scss

@@ -1,42 +0,0 @@
-@use "../../core/jkl";
-
-@include jkl.comfortable-density-variables {
-    --jkl-info-card-content-wrapper-gap: #{jkl.$spacing-m};
-
-    @include jkl.declare-font-variables("jkl-info-card-title", "heading-2");
-    @include jkl.declare-font-variables("jkl-info-card-content", "body");
-}
-
-@include jkl.compact-density-variables {
-    --jkl-info-card-content-wrapper-gap: #{jkl.$spacing-s};
-    --jkl-info-card-title-font-size: var(--jkl-heading-4-font-size);
-    --jkl-info-card-title-line-height: var(--jkl-heading-4-line-height);
-    --jkl-info-card-title-font-weight: #{jkl.$typography-weight-normal};
-
-    @include jkl.declare-font-variables("jkl-info-card-content", "small");
-}
-
-.jkl-info-card {
-    box-sizing: border-box;
-
-    &__image {
-        width: 100%;
-        aspect-ratio: 3/2;
-    }
-
-    &__title {
-        @include jkl.use-font-variables("jkl-info-card-title");
-    }
-
-    &__content-wrapper {
-        @include jkl.use-font-variables("jkl-info-card-content");
-        gap: var(--jkl-info-card-content-wrapper-gap);
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    @include jkl.forced-colors-mode {
-        border: jkl.rem(2px) solid CanvasText;
-    }
-}

package/styles/components/card/_nav-card.scss

@@ -1,119 +0,0 @@
-@use "../../core/jkl";
-
-@include jkl.light-mode-variables {
-    --jkl-nav-card-background: #{jkl.$color-hvit};
-    --jkl-nav-card-shadow: #{jkl.$shadow-navigation};
-    --jkl-nav-card-shadow--hover: #{jkl.$shadow-navigation--hover};
-    --jkl-nav-card-info-border-color: #{jkl.$color-svaberg};
-}
-
-@include jkl.dark-mode-variables {
-    --jkl-nav-card-background: #{jkl.$color-skifer};
-    --jkl-nav-card-shadow: none;
-    --jkl-nav-card-shadow--hover: none;
-    --jkl-nav-card-info-border-color: #{jkl.$color-stein};
-}
-
-@include jkl.comfortable-density-variables {
-    --jkl-nav-card-content-wrapper-gap: #{jkl.$spacing-m};
-    --jkl-nav-card-info-padding: #{jkl.$spacing-l} 0 0 0;
-
-    @include jkl.declare-font-variables("jkl-nav-card-link", "heading-2");
-    @include jkl.declare-font-variables("jkl-nav-card-content", "body");
-}
-
-@include jkl.compact-density-variables {
-    --jkl-nav-card-info-padding: #{jkl.$spacing-s} 0 0 0;
-
-    @include jkl.declare-font-variables("jkl-nav-card-content", "small");
-}
-
-.jkl-nav-card {
-    display: block;
-    box-sizing: border-box;
-    transform: translate3d(0, 0, 0);
-    text-decoration: none;
-    color: var(--jkl-color);
-    outline: 0;
-
-    border-radius: jkl.rem(4px);
-    overflow: hidden;
-    box-shadow: var(--jkl-nav-card-shadow);
-    background-color: var(--jkl-nav-card-background);
-
-    @include jkl.motion;
-    transition-property: box-shadow, transform;
-
-    &__image {
-        width: 100%;
-        aspect-ratio: 3/2;
-    }
-
-    &__content {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: var(--jkl-nav-card-content-wrapper-gap);
-
-        @include jkl.use-font-variables("jkl-nav-card-content");
-    }
-
-    &__link {
-        @include jkl.use-font-variables("jkl-nav-card-link");
-        box-sizing: border-box;
-        position: relative;
-
-        &::after {
-            $_right-arrow: "\2192"; // unicode right arrow
-
-            @include jkl.decorative($content: $_right-arrow);
-            display: inline;
-            margin-left: -0.2em;
-            padding-left: 0.35em;
-            padding-right: 0.35em;
-        }
-
-        &[target="_blank"],
-        &--external {
-            &::after {
-                $_north-east-arrow: "\2197"; // unicode north east arrow (up/right)
-
-                @include jkl.decorative($content: $_north-east-arrow);
-            }
-        }
-    }
-
-    &__description {
-        @include jkl.use-font-variables("jkl-nav-card-content");
-    }
-
-    &__info {
-        border-top: jkl.rem(1px) solid var(--jkl-nav-card-info-border-color);
-        padding: var(--jkl-nav-card-info-padding);
-
-        @include jkl.text-style("small");
-        width: 100%;
-    }
-
-    &__tag-wrapper {
-        display: flex;
-        gap: jkl.$unit-15 jkl.$unit-30;
-        flex-wrap: wrap;
-    }
-
-    &:hover {
-        box-shadow: var(--jkl-nav-card-shadow--hover);
-        transform: translate3d(0, jkl.rem(-4px), 0);
-    }
-
-    @include jkl.keyboard-navigation {
-        &:focus {
-            outline: jkl.rem(2px) solid var(--jkl-color);
-        }
-    }
-
-    @include jkl.forced-colors-mode {
-        outline: revert;
-        border: jkl.rem(2px) solid LinkText;
-    }
-}

package/styles/components/card/_task-card.scss

@@ -1,55 +0,0 @@
-@use "../../core/jkl";
-
-@include jkl.light-mode-variables {
-    --jkl-task-card-background--highlighted: #{jkl.$color-hvit};
-    --jkl-task-card-background--normal: #{jkl.$color-snohvit};
-    --jkl-task-card-background--subdued: #{jkl.$color-dis};
-    --jkl-task-card-shadow: #{jkl.$shadow-task-card};
-}
-
-@include jkl.dark-mode-variables {
-    --jkl-task-card-background--highlighted: #{jkl.$color-skifer};
-    --jkl-task-card-background--normal: #{jkl.$color-skifer};
-    --jkl-task-card-background--subdued: #{jkl.$color-svart};
-    --jkl-task-card-shadow: none;
-}
-
-.jkl-task-card {
-    box-sizing: border-box;
-    border-radius: jkl.rem(4px);
-
-    @include jkl.motion;
-    transition-property: background-color;
-
-    &__content-wrapper {
-        display: block;
-    }
-
-    &--hvit,
-    &--highlighted {
-        background-color: var(--jkl-task-card-background--highlighted);
-    }
-
-    &--snohvit,
-    &--normal {
-        background-color: var(--jkl-task-card-background--normal);
-    }
-
-    &--sand,
-    &--subdued {
-        background-color: var(--jkl-task-card-background--subdued);
-    }
-
-    &--dis,
-    &--very-subdued {
-        background-color: var(--jkl-task-card-background--very-subdued);
-    }
-
-    &--with-shadow {
-        box-shadow: var(--jkl-task-card-shadow);
-    }
-
-    @include jkl.forced-colors-mode {
-        border: jkl.rem(2px) solid CanvasText;
-    }
-}

package/styles/components/card/development/info-card-example.css

@@ -1,26 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
- */
-@media screen and (prefers-color-scheme: light) {
-  :root {
-    --card-background: #000000;
-  }
-}
-[data-theme=light] {
-  --card-background: #000000;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --card-background: #313030;
-  }
-}
-[data-theme=dark] {
-  --card-background: #313030;
-}
-
-.example-info-card {
-  background-color: var(--card-background);
-  color: #f9f9f9;
-}

package/styles/components/card/development/info-card-example.min.css

@@ -1 +0,0 @@
-@media screen and (prefers-color-scheme:light){:root{--card-background:#000}}[data-theme=light]{--card-background:#000}@media screen and (prefers-color-scheme:dark){:root{--card-background:#313030}}[data-theme=dark]{--card-background:#313030}.example-info-card{background-color:var(--card-background);color:#f9f9f9}

package/styles/components/card/development/info-card-example.scss

@@ -1,14 +0,0 @@
-@use "../../core/jkl";
-
-@include jkl.light-mode-variables {
-    --card-background: #{jkl.$color-svart};
-}
-
-@include jkl.dark-mode-variables {
-    --card-background: #{jkl.$color-skifer};
-}
-
-.example-info-card {
-    background-color: var(--card-background);
-    color: jkl.$color-snohvit;
-}

package/styles/components/card/development/task-card-example.css

@@ -1,9 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
- */
-.jkl-task-card-example__content {
-  transition-timing-function: ease;
-  transition-duration: 400ms;
-  transition-property: height;
-}

package/styles/components/card/development/task-card-example.min.css

@@ -1 +0,0 @@
-.jkl-task-card-example__content{transition-duration:.4s;transition-property:height;transition-timing-function:ease}

package/styles/components/card/development/task-card-example.scss

@@ -1,8 +0,0 @@
-@use "../../core/jkl";
-
-.jkl-task-card-example {
-    &__content {
-        @include jkl.motion("standard", "lazy");
-        transition-property: height;
-    }
-}