@fremtind/jokul 0.7.0 → 0.8.1

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

@@ -0,0 +1,55 @@
+@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/src/components/card/styles/card.css

@@ -0,0 +1,332 @@
+@charset "UTF-8";
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-info-card-content-wrapper-gap: 1rem;
+  --jkl-info-card-title-font-size: var(--jkl-heading-2-font-size);
+  --jkl-info-card-title-line-height: var(--jkl-heading-2-line-height);
+  --jkl-info-card-title-font-weight: var(--jkl-heading-2-font-weight);
+  --jkl-info-card-content-font-size: var(--jkl-body-font-size);
+  --jkl-info-card-content-line-height: var(--jkl-body-line-height);
+  --jkl-info-card-content-font-weight: var(--jkl-body-font-weight);
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-info-card-content-wrapper-gap: 0.75rem;
+  --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: 400;
+  --jkl-info-card-content-font-size: var(--jkl-small-font-size);
+  --jkl-info-card-content-line-height: var(--jkl-small-line-height);
+  --jkl-info-card-content-font-weight: var(--jkl-small-font-weight);
+}
+
+.jkl-info-card {
+  box-sizing: border-box;
+}
+.jkl-info-card__image {
+  width: 100%;
+  aspect-ratio: 3/2;
+}
+.jkl-info-card__title {
+  font-size: var(--jkl-info-card-title-font-size);
+  line-height: var(--jkl-info-card-title-line-height);
+  font-weight: var(--jkl-info-card-title-font-weight);
+}
+.jkl-info-card__content-wrapper {
+  font-size: var(--jkl-info-card-content-font-size);
+  line-height: var(--jkl-info-card-content-line-height);
+  font-weight: var(--jkl-info-card-content-font-weight);
+  gap: var(--jkl-info-card-content-wrapper-gap);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+@media screen and (forced-colors: active) {
+  .jkl-info-card {
+    border: 0.125rem solid CanvasText;
+  }
+}
+
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-nav-card-background: #ffffff;
+    --jkl-nav-card-shadow: 0 0.25rem 0.9375rem rgba(37, 42, 49, 0.1);
+    --jkl-nav-card-shadow--hover: 0 0.375rem 1.5625rem rgba(37, 42, 49, 0.12);
+    --jkl-nav-card-info-border-color: #c8c5c3;
+  }
+}
+[data-theme=light] {
+  --jkl-nav-card-background: #ffffff;
+  --jkl-nav-card-shadow: 0 0.25rem 0.9375rem rgba(37, 42, 49, 0.1);
+  --jkl-nav-card-shadow--hover: 0 0.375rem 1.5625rem rgba(37, 42, 49, 0.12);
+  --jkl-nav-card-info-border-color: #c8c5c3;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-nav-card-background: #313030;
+    --jkl-nav-card-shadow: none;
+    --jkl-nav-card-shadow--hover: none;
+    --jkl-nav-card-info-border-color: #636060;
+  }
+}
+[data-theme=dark] {
+  --jkl-nav-card-background: #313030;
+  --jkl-nav-card-shadow: none;
+  --jkl-nav-card-shadow--hover: none;
+  --jkl-nav-card-info-border-color: #636060;
+}
+
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-nav-card-content-wrapper-gap: 1rem;
+  --jkl-nav-card-info-padding: 1.5rem 0 0 0;
+  --jkl-nav-card-link-font-size: var(--jkl-heading-2-font-size);
+  --jkl-nav-card-link-line-height: var(--jkl-heading-2-line-height);
+  --jkl-nav-card-link-font-weight: var(--jkl-heading-2-font-weight);
+  --jkl-nav-card-content-font-size: var(--jkl-body-font-size);
+  --jkl-nav-card-content-line-height: var(--jkl-body-line-height);
+  --jkl-nav-card-content-font-weight: var(--jkl-body-font-weight);
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-nav-card-info-padding: 0.75rem 0 0 0;
+  --jkl-nav-card-content-font-size: var(--jkl-small-font-size);
+  --jkl-nav-card-content-line-height: var(--jkl-small-line-height);
+  --jkl-nav-card-content-font-weight: var(--jkl-small-font-weight);
+}
+
+.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: 0.25rem;
+  overflow: hidden;
+  box-shadow: var(--jkl-nav-card-shadow);
+  background-color: var(--jkl-nav-card-background);
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: box-shadow, transform;
+}
+.jkl-nav-card__image {
+  width: 100%;
+  aspect-ratio: 3/2;
+}
+.jkl-nav-card__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--jkl-nav-card-content-wrapper-gap);
+  font-size: var(--jkl-nav-card-content-font-size);
+  line-height: var(--jkl-nav-card-content-line-height);
+  font-weight: var(--jkl-nav-card-content-font-weight);
+}
+.jkl-nav-card__link {
+  font-size: var(--jkl-nav-card-link-font-size);
+  line-height: var(--jkl-nav-card-link-line-height);
+  font-weight: var(--jkl-nav-card-link-font-weight);
+  box-sizing: border-box;
+  position: relative;
+}
+.jkl-nav-card__link::after {
+  content: "→";
+  content: "→"/"";
+  alt: " ";
+  display: inline;
+  margin-left: -0.2em;
+  padding-left: 0.35em;
+  padding-right: 0.35em;
+}
+.jkl-nav-card__link[target=_blank]::after, .jkl-nav-card__link--external::after {
+  content: "↗";
+  content: "↗"/"";
+  alt: " ";
+}
+.jkl-nav-card__description {
+  font-size: var(--jkl-nav-card-content-font-size);
+  line-height: var(--jkl-nav-card-content-line-height);
+  font-weight: var(--jkl-nav-card-content-font-weight);
+}
+.jkl-nav-card__info {
+  border-top: 0.0625rem solid var(--jkl-nav-card-info-border-color);
+  padding: var(--jkl-nav-card-info-padding);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+  width: 100%;
+}
+.jkl-nav-card__tag-wrapper {
+  display: flex;
+  gap: 0.75rem 1.5rem;
+  flex-wrap: wrap;
+}
+.jkl-nav-card:hover {
+  box-shadow: var(--jkl-nav-card-shadow--hover);
+  transform: translate3d(0, -0.25rem, 0);
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus {
+  outline: 0.125rem solid var(--jkl-color);
+}
+
+@media screen and (forced-colors: active) {
+  .jkl-nav-card {
+    outline: revert;
+    border: 0.125rem solid LinkText;
+  }
+}
+
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-task-card-background--highlighted: #ffffff;
+    --jkl-task-card-background--normal: #f9f9f9;
+    --jkl-task-card-background--subdued: #ece9e5;
+    --jkl-task-card-shadow: 0 0.25rem 0.75rem rgba(37, 42, 49, 0.03);
+  }
+}
+[data-theme=light] {
+  --jkl-task-card-background--highlighted: #ffffff;
+  --jkl-task-card-background--normal: #f9f9f9;
+  --jkl-task-card-background--subdued: #ece9e5;
+  --jkl-task-card-shadow: 0 0.25rem 0.75rem rgba(37, 42, 49, 0.03);
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-task-card-background--highlighted: #313030;
+    --jkl-task-card-background--normal: #313030;
+    --jkl-task-card-background--subdued: #000000;
+    --jkl-task-card-shadow: none;
+  }
+}
+[data-theme=dark] {
+  --jkl-task-card-background--highlighted: #313030;
+  --jkl-task-card-background--normal: #313030;
+  --jkl-task-card-background--subdued: #000000;
+  --jkl-task-card-shadow: none;
+}
+
+.jkl-task-card {
+  box-sizing: border-box;
+  border-radius: 0.25rem;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: background-color;
+}
+.jkl-task-card__content-wrapper {
+  display: block;
+}
+.jkl-task-card--hvit, .jkl-task-card--highlighted {
+  background-color: var(--jkl-task-card-background--highlighted);
+}
+.jkl-task-card--snohvit, .jkl-task-card--normal {
+  background-color: var(--jkl-task-card-background--normal);
+}
+.jkl-task-card--sand, .jkl-task-card--subdued {
+  background-color: var(--jkl-task-card-background--subdued);
+}
+.jkl-task-card--dis, .jkl-task-card--very-subdued {
+  background-color: var(--jkl-task-card-background--very-subdued);
+}
+.jkl-task-card--with-shadow {
+  box-shadow: var(--jkl-task-card-shadow);
+}
+@media screen and (forced-colors: active) {
+  .jkl-task-card {
+    border: 0.125rem solid CanvasText;
+  }
+}
+
+.jkl-card {
+  --padding-s: var(--jkl-spacing-4);
+  --padding-m: var(--jkl-spacing-12);
+  --padding-l: var(--jkl-spacing-16);
+  --padding-xl: var(--jkl-spacing-24);
+  --border-radius: 0.25rem;
+  --border-color: transparent;
+  --border-width: 0.0625rem;
+  --background-color: transparent;
+  position: relative;
+  overflow: hidden;
+  display: block;
+  background-color: var(--background-color);
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  padding: var(--padding, var(--padding-s));
+  text-decoration: none;
+  color: var(--jkl-color-text-default);
+}
+.jkl-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid var(--border-color);
+  transition-timing-function: ease;
+  transition-duration: 100ms;
+  transition-property: border-color, border-size;
+}
+@media (min-width: 680px) {
+  .jkl-card {
+    --padding-s: var(--jkl-spacing-8);
+    --padding-m: var(--jkl-spacing-16);
+    --padding-l: var(--jkl-spacing-24);
+    --padding-xl: var(--jkl-spacing-32);
+  }
+}
+.jkl-card[data-padding=s] {
+  --padding: var(--padding-s);
+}
+.jkl-card[data-padding=m] {
+  --padding: var(--padding-m);
+}
+.jkl-card[data-padding=l] {
+  --padding: var(--padding-l);
+}
+.jkl-card[data-padding=xl] {
+  --padding: var(--padding-xl);
+}
+.jkl-card--high {
+  --background-color: var(--jkl-color-background-container-high);
+}
+.jkl-card--low {
+  --background-color: var(--jkl-color-background-container-low);
+}
+.jkl-card--outlined {
+  --border-color: var(--jkl-color-border-separator);
+}
+.jkl-card[data-clickable=true] {
+  cursor: pointer;
+}
+.jkl-card[data-clickable=true]:hover {
+  --border-color: var(--jkl-color-border-separator-hover);
+  --border-width: 0.125rem;
+}
+.jkl-card[data-clickable=true]:focus-visible {
+  outline: 2px solid var(--jkl-color-border-action);
+  outline-offset: 2px;
+}
+
+.jkl-card-image {
+  --margin: calc(var(--padding, 0) * -1);
+  width: calc(100% + 2 * var(--padding, 0));
+  aspect-ratio: var(--image-aspect-ratio, 3/2);
+  margin-inline: var(--margin, 0);
+}
+.jkl-card-image--top {
+  margin-top: var(--margin, 0);
+}
+.jkl-card-image--bottom {
+  margin-bottom: var(--margin, 0);
+}

package/src/components/card/styles/card.min.css

@@ -0,0 +1 @@
+@charset "UTF-8";:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-info-card-content-wrapper-gap:1rem;--jkl-info-card-title-font-size:var(--jkl-heading-2-font-size);--jkl-info-card-title-line-height:var(--jkl-heading-2-line-height);--jkl-info-card-title-font-weight:var(--jkl-heading-2-font-weight);--jkl-info-card-content-font-size:var(--jkl-body-font-size);--jkl-info-card-content-line-height:var(--jkl-body-line-height);--jkl-info-card-content-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-info-card-content-wrapper-gap:0.75rem;--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:400;--jkl-info-card-content-font-size:var(--jkl-small-font-size);--jkl-info-card-content-line-height:var(--jkl-small-line-height);--jkl-info-card-content-font-weight:var(--jkl-small-font-weight)}.jkl-info-card{box-sizing:border-box}.jkl-info-card__image{aspect-ratio:3/2;width:100%}.jkl-info-card__title{font-size:var(--jkl-info-card-title-font-size);font-weight:var(--jkl-info-card-title-font-weight);line-height:var(--jkl-info-card-title-line-height)}.jkl-info-card__content-wrapper{align-items:flex-start;display:flex;flex-direction:column;font-size:var(--jkl-info-card-content-font-size);font-weight:var(--jkl-info-card-content-font-weight);gap:var(--jkl-info-card-content-wrapper-gap);line-height:var(--jkl-info-card-content-line-height)}@media screen and (forced-colors:active){.jkl-info-card{border:.125rem solid CanvasText}}@media screen and (prefers-color-scheme:light){:root{--jkl-nav-card-background:#fff;--jkl-nav-card-shadow:0 0.25rem 0.9375rem #252a311a;--jkl-nav-card-shadow--hover:0 0.375rem 1.5625rem #252a311f;--jkl-nav-card-info-border-color:#c8c5c3}}[data-theme=light]{--jkl-nav-card-background:#fff;--jkl-nav-card-shadow:0 0.25rem 0.9375rem #252a311a;--jkl-nav-card-shadow--hover:0 0.375rem 1.5625rem #252a311f;--jkl-nav-card-info-border-color:#c8c5c3}@media screen and (prefers-color-scheme:dark){:root{--jkl-nav-card-background:#313030;--jkl-nav-card-shadow:none;--jkl-nav-card-shadow--hover:none;--jkl-nav-card-info-border-color:#636060}}[data-theme=dark]{--jkl-nav-card-background:#313030;--jkl-nav-card-shadow:none;--jkl-nav-card-shadow--hover:none;--jkl-nav-card-info-border-color:#636060}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-nav-card-content-wrapper-gap:1rem;--jkl-nav-card-info-padding:1.5rem 0 0 0;--jkl-nav-card-link-font-size:var(--jkl-heading-2-font-size);--jkl-nav-card-link-line-height:var(--jkl-heading-2-line-height);--jkl-nav-card-link-font-weight:var(--jkl-heading-2-font-weight);--jkl-nav-card-content-font-size:var(--jkl-body-font-size);--jkl-nav-card-content-line-height:var(--jkl-body-line-height);--jkl-nav-card-content-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-nav-card-info-padding:0.75rem 0 0 0;--jkl-nav-card-content-font-size:var(--jkl-small-font-size);--jkl-nav-card-content-line-height:var(--jkl-small-line-height);--jkl-nav-card-content-font-weight:var(--jkl-small-font-weight)}.jkl-nav-card{background-color:var(--jkl-nav-card-background);border-radius:.25rem;box-shadow:var(--jkl-nav-card-shadow);box-sizing:border-box;color:var(--jkl-color);display:block;outline:0;overflow:hidden;text-decoration:none;transform:translateZ(0);transition-duration:.15s;transition-property:box-shadow,transform;transition-timing-function:ease}.jkl-nav-card__image{aspect-ratio:3/2;width:100%}.jkl-nav-card__content{align-items:flex-start;display:flex;flex-direction:column;font-size:var(--jkl-nav-card-content-font-size);font-weight:var(--jkl-nav-card-content-font-weight);gap:var(--jkl-nav-card-content-wrapper-gap);line-height:var(--jkl-nav-card-content-line-height)}.jkl-nav-card__link{box-sizing:border-box;font-size:var(--jkl-nav-card-link-font-size);font-weight:var(--jkl-nav-card-link-font-weight);line-height:var(--jkl-nav-card-link-line-height);position:relative}.jkl-nav-card__link:after{alt:" ";content:"→";content:"→"/"";display:inline;margin-left:-.2em;padding-left:.35em;padding-right:.35em}.jkl-nav-card__link--external:after,.jkl-nav-card__link[target=_blank]:after{alt:" ";content:"↗";content:"↗"/""}.jkl-nav-card__description{font-size:var(--jkl-nav-card-content-font-size);font-weight:var(--jkl-nav-card-content-font-weight);line-height:var(--jkl-nav-card-content-line-height)}.jkl-nav-card__info{--jkl-icon-weight:300;border-top:.0625rem solid var(--jkl-nav-card-info-border-color);font-size:1rem;font-weight:400;line-height:1.5rem;padding:var(--jkl-nav-card-info-padding);width:100%}.jkl-nav-card__tag-wrapper{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem}.jkl-nav-card:hover{box-shadow:var(--jkl-nav-card-shadow--hover);transform:translate3d(0,-.25rem,0)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus{outline:.125rem solid var(--jkl-color)}@media screen and (forced-colors:active){.jkl-nav-card{border:.125rem solid LinkText;outline:revert}}@media screen and (prefers-color-scheme:light){:root{--jkl-task-card-background--highlighted:#fff;--jkl-task-card-background--normal:#f9f9f9;--jkl-task-card-background--subdued:#ece9e5;--jkl-task-card-shadow:0 0.25rem 0.75rem #252a3108}}[data-theme=light]{--jkl-task-card-background--highlighted:#fff;--jkl-task-card-background--normal:#f9f9f9;--jkl-task-card-background--subdued:#ece9e5;--jkl-task-card-shadow:0 0.25rem 0.75rem #252a3108}@media screen and (prefers-color-scheme:dark){:root{--jkl-task-card-background--highlighted:#313030;--jkl-task-card-background--normal:#313030;--jkl-task-card-background--subdued:#000;--jkl-task-card-shadow:none}}[data-theme=dark]{--jkl-task-card-background--highlighted:#313030;--jkl-task-card-background--normal:#313030;--jkl-task-card-background--subdued:#000;--jkl-task-card-shadow:none}.jkl-task-card{border-radius:.25rem;box-sizing:border-box;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-task-card__content-wrapper{display:block}.jkl-task-card--highlighted,.jkl-task-card--hvit{background-color:var(--jkl-task-card-background--highlighted)}.jkl-task-card--normal,.jkl-task-card--snohvit{background-color:var(--jkl-task-card-background--normal)}.jkl-task-card--sand,.jkl-task-card--subdued{background-color:var(--jkl-task-card-background--subdued)}.jkl-task-card--dis,.jkl-task-card--very-subdued{background-color:var(--jkl-task-card-background--very-subdued)}.jkl-task-card--with-shadow{box-shadow:var(--jkl-task-card-shadow)}@media screen and (forced-colors:active){.jkl-task-card{border:.125rem solid CanvasText}}.jkl-card{--padding-s:var(--jkl-spacing-4);--padding-m:var(--jkl-spacing-12);--padding-l:var(--jkl-spacing-16);--padding-xl:var(--jkl-spacing-24);--border-radius:0.25rem;--border-color:#0000;--border-width:0.0625rem;--background-color:#0000;background-color:var(--background-color);box-sizing:border-box;color:var(--jkl-color-text-default);display:block;overflow:hidden;padding:var(--padding,var(--padding-s));position:relative;text-decoration:none}.jkl-card,.jkl-card:after{border-radius:var(--border-radius)}.jkl-card:after{border:var(--border-width) solid var(--border-color);content:"";inset:0;position:absolute;transition-duration:.1s;transition-property:border-color,border-size;transition-timing-function:ease}@media (min-width:680px){.jkl-card{--padding-s:var(--jkl-spacing-8);--padding-m:var(--jkl-spacing-16);--padding-l:var(--jkl-spacing-24);--padding-xl:var(--jkl-spacing-32)}}.jkl-card[data-padding=s]{--padding:var(--padding-s)}.jkl-card[data-padding=m]{--padding:var(--padding-m)}.jkl-card[data-padding=l]{--padding:var(--padding-l)}.jkl-card[data-padding=xl]{--padding:var(--padding-xl)}.jkl-card--high{--background-color:var(--jkl-color-background-container-high)}.jkl-card--low{--background-color:var(--jkl-color-background-container-low)}.jkl-card--outlined{--border-color:var(--jkl-color-border-separator)}.jkl-card[data-clickable=true]{cursor:pointer}.jkl-card[data-clickable=true]:hover{--border-color:var(--jkl-color-border-separator-hover);--border-width:0.125rem}.jkl-card[data-clickable=true]:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-card-image{--margin:calc(var(--padding, 0)*-1);aspect-ratio:var(--image-aspect-ratio,3/2);margin-inline:var(--margin,0);width:calc(100% + var(--padding, 0)*2)}.jkl-card-image--top{margin-top:var(--margin,0)}.jkl-card-image--bottom{margin-bottom:var(--margin,0)}

package/src/components/card/styles/card.scss

@@ -0,0 +1,99 @@
+@charset "UTF-8";
+@use "../../../core/jkl";
+@use "info-card";
+@use "nav-card";
+@use "task-card";
+
+.jkl-card {
+    --padding-s: var(--jkl-spacing-4);
+    --padding-m: var(--jkl-spacing-12);
+    --padding-l: var(--jkl-spacing-16);
+    --padding-xl: var(--jkl-spacing-24);
+    --border-radius: #{jkl.rem(4px)};
+    --border-color: transparent;
+    --border-width: #{jkl.rem(1px)};
+    --background-color: transparent;
+
+    position: relative;
+    overflow: hidden;
+    display: block;
+    background-color: var(--background-color);
+    border-radius: var(--border-radius);
+    box-sizing: border-box;
+    padding: var(--padding, var(--padding-s));
+    text-decoration: none;
+    color: var(--jkl-color-text-default);
+
+    &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: var(--border-radius);
+        border: var(--border-width) solid var(--border-color);
+        @include jkl.motion("standard", "snappy", border-color, border-size);
+    }
+
+    @include jkl.from-medium-device {
+        --padding-s: var(--jkl-spacing-8);
+        --padding-m: var(--jkl-spacing-16);
+        --padding-l: var(--jkl-spacing-24);
+        --padding-xl: var(--jkl-spacing-32);
+    }
+
+    &[data-padding="s"] {
+        --padding: var(--padding-s);
+    }
+
+    &[data-padding="m"] {
+        --padding: var(--padding-m);
+    }
+
+    &[data-padding="l"] {
+        --padding: var(--padding-l);
+    }
+
+    &[data-padding="xl"] {
+        --padding: var(--padding-xl);
+    }
+
+    &--high {
+        --background-color: var(--jkl-color-background-container-high);
+    }
+
+    &--low {
+        --background-color: var(--jkl-color-background-container-low);
+    }
+
+    &--outlined {
+        --border-color: var(--jkl-color-border-separator);
+    }
+
+    &[data-clickable="true"] {
+        cursor: pointer;
+
+        &:hover {
+            --border-color: var(--jkl-color-border-separator-hover);
+            --border-width: #{jkl.rem(2px)};
+        }
+
+        &:focus-visible {
+            @include jkl.focus-outline;
+        }
+    }
+}
+
+.jkl-card-image {
+    --margin: calc(var(--padding, 0) * -1); // Sett negativ margin tilsvarende padding (fra Card)
+
+    width: calc(100% + 2 * var(--padding, 0));
+    aspect-ratio: var(--image-aspect-ratio, 3/2);
+    margin-inline: var(--margin, 0);
+
+    &--top {
+        margin-top: var(--margin, 0);
+    }
+
+    &--bottom {
+        margin-bottom: var(--margin, 0);
+    }
+}

package/src/components/icon/styles/icon.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 10 Sep 2024 05:21:22 GMT
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
  */
 @media screen and (prefers-color-scheme: light) {
   :root {

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

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

package/src/components/icon-button/styles/icon-button.css

@@ -0,0 +1,98 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-icon-button-border-color: #1b1917;
+    --jkl-icon-button-focus-color: #636060;
+  }
+}
+[data-theme=light] {
+  --jkl-icon-button-border-color: #1b1917;
+  --jkl-icon-button-focus-color: #636060;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-icon-button-border-color: #f9f9f9;
+    --jkl-icon-button-focus-color: #c8c5c3;
+  }
+}
+[data-theme=dark] {
+  --jkl-icon-button-border-color: #f9f9f9;
+  --jkl-icon-button-focus-color: #c8c5c3;
+}
+
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-icon-button-icon-width: 1.25rem;
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-icon-button-icon-width: 0.875rem;
+}
+
+.jkl-icon-button {
+  background-color: transparent;
+  cursor: pointer;
+  color: inherit;
+  position: relative;
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.6, 0.2, 0.35, 1);
+  transition-duration: 100ms;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-icon-button:active, .jkl-icon-button:hover, .jkl-icon-button:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-icon-button {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-icon-button:active, .jkl-icon-button:hover, .jkl-icon-button:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-icon-button .jkl-icon {
+  display: flex;
+  align-items: center;
+}
+@media screen and (forced-colors: active) {
+  .jkl-icon-button .jkl-icon {
+    stroke: ButtonText;
+  }
+  .jkl-icon-button .jkl-icon svg, .jkl-icon-button .jkl-icon path {
+    stroke: ButtonText;
+  }
+}
+.jkl-icon-button .jkl-icon--animated {
+  display: revert;
+}
+.jkl-icon-button:hover {
+  color: var(--jkl-icon-button-focus-color);
+}
+.jkl-icon-button:focus-visible {
+  color: var(--jkl-icon-button-focus-color);
+  outline: 2px solid var(--jkl-color-border-action);
+  outline-offset: 2px;
+}
+@media screen and (forced-colors: active) {
+  .jkl-icon-button:focus-visible {
+    border: revert;
+  }
+}
+@media screen and (forced-colors: active) {
+  .jkl-icon-button {
+    border: revert;
+    background-color: revert;
+  }
+}

package/src/components/icon-button/styles/icon-button.min.css

@@ -0,0 +1 @@
+@media screen and (prefers-color-scheme:light){:root{--jkl-icon-button-border-color:#1b1917;--jkl-icon-button-focus-color:#636060}}[data-theme=light]{--jkl-icon-button-border-color:#1b1917;--jkl-icon-button-focus-color:#636060}@media screen and (prefers-color-scheme:dark){:root{--jkl-icon-button-border-color:#f9f9f9;--jkl-icon-button-focus-color:#c8c5c3}}[data-theme=dark]{--jkl-icon-button-border-color:#f9f9f9;--jkl-icon-button-focus-color:#c8c5c3}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-icon-button-icon-width:1.25rem}[data-density=compact],[data-layout-density=compact]{--jkl-icon-button-icon-width:0.875rem}.jkl-icon-button{background-color:initial;border-style:none;color:inherit;cursor:pointer;position:relative;transition-duration:.1s;transition-property:box-shadow;transition-timing-function:cubic-bezier(.6,.2,.35,1)}.jkl-icon-button,.jkl-icon-button:active,.jkl-icon-button:focus,.jkl-icon-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-icon-button{border-style:revert}.jkl-icon-button,.jkl-icon-button:active,.jkl-icon-button:focus,.jkl-icon-button:hover{outline:revert;outline-style:revert}}.jkl-icon-button .jkl-icon{align-items:center;display:flex}@media screen and (forced-colors:active){.jkl-icon-button .jkl-icon,.jkl-icon-button .jkl-icon path,.jkl-icon-button .jkl-icon svg{stroke:ButtonText}}.jkl-icon-button .jkl-icon--animated{display:revert}.jkl-icon-button:hover{color:var(--jkl-icon-button-focus-color)}.jkl-icon-button:focus-visible{color:var(--jkl-icon-button-focus-color);outline:2px solid var(--jkl-color-border-action);outline-offset:2px}@media screen and (forced-colors:active){.jkl-icon-button:focus-visible{border:revert}}@media screen and (forced-colors:active){.jkl-icon-button{background-color:revert;border:revert}}

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

@@ -0,0 +1,59 @@
+@charset "UTF-8";
+@use "../../../core/jkl";
+
+@include jkl.light-mode-variables {
+    --jkl-icon-button-border-color: #{jkl.$color-granitt};
+    --jkl-icon-button-focus-color: #{jkl.$color-stein};
+}
+
+@include jkl.dark-mode-variables {
+    --jkl-icon-button-border-color: #{jkl.$color-snohvit};
+    --jkl-icon-button-focus-color: #{jkl.$color-svaberg};
+}
+
+@include jkl.comfortable-density-variables {
+    --jkl-icon-button-icon-width: #{jkl.rem(20px)};
+}
+
+@include jkl.compact-density-variables {
+    --jkl-icon-button-icon-width: #{jkl.rem(14px)};
+}
+
+.jkl-icon-button {
+    background-color: transparent;
+    cursor: pointer;
+    color: inherit;
+    position: relative;
+    transition-property: box-shadow;
+
+    @include jkl.motion(focus, snappy);
+    @include jkl.reset-outline;
+
+    .jkl-icon {
+        display: flex;
+        align-items: center;
+        @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
+
+        &--animated {
+            display: revert;
+        }
+    }
+
+    &:hover {
+        color: var(--jkl-icon-button-focus-color);
+    }
+
+    &:focus-visible {
+        color: var(--jkl-icon-button-focus-color);
+
+        @include jkl.focus-outline;
+        @include jkl.forced-colors-mode {
+            border: revert;
+        }
+    }
+
+    @include jkl.forced-colors-mode {
+        border: revert;
+        background-color: revert;
+    }
+}

package/src/components/image/styles/_index.scss

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