@fremtind/jokul 1.4.1 → 1.5.1

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

@@ -1,148 +1,146 @@
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
  */
-@media screen and (prefers-color-scheme: light) {
-  :root {
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
+  @media screen and (prefers-color-scheme: light) {
+    :root {
+      --jkl-skeleton-element-color: #e0dbd4;
+      --jkl-skeleton-sweeper-color: #f9f9f9;
+    }
+  }
+  [data-theme=light] {
     --jkl-skeleton-element-color: #e0dbd4;
     --jkl-skeleton-sweeper-color: #f9f9f9;
   }
-}
-[data-theme=light] {
-  --jkl-skeleton-element-color: #e0dbd4;
-  --jkl-skeleton-sweeper-color: #f9f9f9;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
+  @media screen and (prefers-color-scheme: dark) {
+    :root {
+      --jkl-skeleton-element-color: #636060;
+      --jkl-skeleton-sweeper-color: #1b1917;
+    }
+  }
+  [data-theme=dark] {
     --jkl-skeleton-element-color: #636060;
     --jkl-skeleton-sweeper-color: #1b1917;
   }
-}
-[data-theme=dark] {
-  --jkl-skeleton-element-color: #636060;
-  --jkl-skeleton-sweeper-color: #1b1917;
-}
-
-.jkl-skeleton-animation {
-  --jkl-skeleton-sweep-duration: 3s;
-  position: relative;
-  overflow: hidden;
-}
-.jkl-skeleton-animation::after {
-  content: " ";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 12.5rem;
-  background: linear-gradient(89.17deg, rgba(249, 249, 249, 0) 0.8%, var(--jkl-skeleton-sweeper-color) 50.09%, rgba(249, 249, 249, 0) 96.31%);
-  animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-umtevu1;
-}
-@media (width >= 0) and (max-width: 679px) {
   .jkl-skeleton-animation {
-    width: 9.375rem;
+    --jkl-skeleton-sweep-duration: 3s;
+    position: relative;
+    overflow: hidden;
   }
-}
-@media screen and (prefers-reduced-motion: reduce) {
   .jkl-skeleton-animation::after {
-    background: none;
+    content: " ";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 12.5rem;
+    background: linear-gradient(89.17deg, rgba(249, 249, 249, 0) 0.8%, var(--jkl-skeleton-sweeper-color) 50.09%, rgba(249, 249, 249, 0) 96.31%);
+    animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uto1cso;
+  }
+  @media (width >= 0) and (max-width: 679px) {
+    .jkl-skeleton-animation {
+      width: 9.375rem;
+    }
+  }
+  @media screen and (prefers-reduced-motion: reduce) {
+    .jkl-skeleton-animation::after {
+      background: none;
+    }
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-skeleton-animation::after {
+      animation: none;
+    }
+  }
+  .jkl-skeleton-animation--compact::after {
+    width: 9.375rem;
   }
-}
-@media screen and (forced-colors: active) {
-  .jkl-skeleton-animation::after {
-    animation: none;
-  }
-}
-.jkl-skeleton-animation--compact::after {
-  width: 9.375rem;
-}
-
-.jkl-skeleton-element {
-  border-radius: 0.125rem;
-  background-color: var(--jkl-skeleton-element-color);
-}
-.jkl-skeleton-element--circle {
-  border-radius: 50%;
-}
-@media screen and (forced-colors: active) {
   .jkl-skeleton-element {
-    border: 1px solid CanvasText;
-    animation: 2s ease infinite jkl-blink-umtevuh;
-  }
-}
-
-.jkl-skeleton-input {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-.jkl-skeleton-input__checkbox {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  gap: 0.5rem;
-}
-@media (width >= 0) and (max-width: 679px) {
+    border-radius: 0.125rem;
+    background-color: var(--jkl-skeleton-element-color);
+  }
+  .jkl-skeleton-element--circle {
+    border-radius: 50%;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-skeleton-element {
+      border: 1px solid CanvasText;
+      animation: 2s ease infinite jkl-blink-uto1ctm;
+    }
+  }
   .jkl-skeleton-input {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .jkl-skeleton-input__checkbox {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
     gap: 0.5rem;
   }
-}
-.jkl-skeleton-input--compact::after {
-  gap: 0.5rem;
-}
-
-.jkl-skeleton-table {
-  display: flex;
-  flex-direction: column;
-}
-.jkl-skeleton-table__header, .jkl-skeleton-table__row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  border-bottom: solid 1px var(--jkl-skeleton-element-color);
-}
-.jkl-skeleton-table__header {
-  padding: 0.75rem 0.5rem;
-}
-.jkl-skeleton-table__row {
-  padding: 1rem 0.5rem;
-}
-@media (width >= 0) and (max-width: 679px) {
+  @media (width >= 0) and (max-width: 679px) {
+    .jkl-skeleton-input {
+      gap: 0.5rem;
+    }
+  }
+  .jkl-skeleton-input--compact::after {
+    gap: 0.5rem;
+  }
+  .jkl-skeleton-table {
+    display: flex;
+    flex-direction: column;
+  }
+  .jkl-skeleton-table__header, .jkl-skeleton-table__row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-bottom: solid 1px var(--jkl-skeleton-element-color);
+  }
   .jkl-skeleton-table__header {
-    padding: 0.5rem 0.25rem;
+    padding: 0.75rem 0.5rem;
   }
   .jkl-skeleton-table__row {
-    padding: 0.75rem 0.25rem;
+    padding: 1rem 0.5rem;
   }
-}
-.jkl-skeleton-table--compact::after__header {
-  padding: 0.5rem 0.25rem;
-}
-.jkl-skeleton-table--compact::after__row {
-  padding: 0.75rem 0.25rem;
-}
-@media screen and (forced-colors: active) {
-  .jkl-skeleton-table {
-    animation: 2s ease-in-out infinite jkl-blink-umtevuh;
+  @media (width >= 0) and (max-width: 679px) {
+    .jkl-skeleton-table__header {
+      padding: 0.5rem 0.25rem;
+    }
+    .jkl-skeleton-table__row {
+      padding: 0.75rem 0.25rem;
+    }
   }
-}
-
-@keyframes jkl-sweep-umtevu1 {
-  0% {
-    transform: translateX(calc(0vw - 200px));
+  .jkl-skeleton-table--compact::after__header {
+    padding: 0.5rem 0.25rem;
   }
-  80%, 100% {
-    transform: translateX(calc(100vw + 400px));
+  .jkl-skeleton-table--compact::after__row {
+    padding: 0.75rem 0.25rem;
   }
-}
-@keyframes jkl-blink-umtevuh {
-  0% {
-    opacity: 1;
+  @media screen and (forced-colors: active) {
+    .jkl-skeleton-table {
+      animation: 2s ease-in-out infinite jkl-blink-uto1ctm;
+    }
   }
-  40%, 50% {
-    opacity: 0.3;
+  @keyframes jkl-sweep-uto1cso {
+    0% {
+      transform: translateX(calc(0vw - 200px));
+    }
+    80%, 100% {
+      transform: translateX(calc(100vw + 400px));
+    }
   }
-  70%, 100% {
-    opacity: 1;
+  @keyframes jkl-blink-uto1ctm {
+    0% {
+      opacity: 1;
+    }
+    40%, 50% {
+      opacity: 0.3;
+    }
+    70%, 100% {
+      opacity: 1;
+    }
   }
 }

package/styles/components/loader/skeleton-loader.min.css

@@ -1 +1 @@
-@media screen and (prefers-color-scheme:light){:root{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}}[data-theme=light]{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}@media screen and (prefers-color-scheme:dark){:root{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}}[data-theme=dark]{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}.jkl-skeleton-animation{--jkl-skeleton-sweep-duration:3s;overflow:hidden;position:relative}.jkl-skeleton-animation:after{animation:var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-umtevu1;background:linear-gradient(89.17deg,#f9f9f900 .8%,var(--jkl-skeleton-sweeper-color) 50.09%,#f9f9f900 96.31%);bottom:0;content:" ";position:absolute;top:0;width:12.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-animation{width:9.375rem}}@media screen and (prefers-reduced-motion:reduce){.jkl-skeleton-animation:after{background:none}}@media screen and (forced-colors:active){.jkl-skeleton-animation:after{animation:none}}.jkl-skeleton-animation--compact:after{width:9.375rem}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-umtevuh 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:.75rem}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:.5rem}}.jkl-skeleton-input--compact:after{gap:.5rem}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header{padding:.75rem .5rem}.jkl-skeleton-table__row{padding:1rem .5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:.5rem .25rem}.jkl-skeleton-table__row{padding:.75rem .25rem}}.jkl-skeleton-table--compact::after__header{padding:.5rem .25rem}.jkl-skeleton-table--compact::after__row{padding:.75rem .25rem}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-umtevuh 2s ease-in-out infinite}}@keyframes jkl-sweep-umtevu1{0%{transform:translateX(-200px)}80%,to{transform:translateX(calc(100vw + 400px))}}@keyframes jkl-blink-umtevuh{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}
+@layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}}[data-theme=light]{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}@media screen and (prefers-color-scheme:dark){:root{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}}[data-theme=dark]{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}.jkl-skeleton-animation{--jkl-skeleton-sweep-duration:3s;overflow:hidden;position:relative}.jkl-skeleton-animation:after{animation:var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uto1cso;background:linear-gradient(89.17deg,#f9f9f900 .8%,var(--jkl-skeleton-sweeper-color) 50.09%,#f9f9f900 96.31%);bottom:0;content:" ";position:absolute;top:0;width:12.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-animation{width:9.375rem}}@media screen and (prefers-reduced-motion:reduce){.jkl-skeleton-animation:after{background:none}}@media screen and (forced-colors:active){.jkl-skeleton-animation:after{animation:none}}.jkl-skeleton-animation--compact:after{width:9.375rem}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-uto1ctm 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:.75rem}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:.5rem}}.jkl-skeleton-input--compact:after{gap:.5rem}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header{padding:.75rem .5rem}.jkl-skeleton-table__row{padding:1rem .5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:.5rem .25rem}.jkl-skeleton-table__row{padding:.75rem .25rem}}.jkl-skeleton-table--compact::after__header{padding:.5rem .25rem}.jkl-skeleton-table--compact::after__row{padding:.75rem .25rem}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-uto1ctm 2s ease-in-out infinite}}@keyframes jkl-sweep-uto1cso{0%{transform:translateX(-200px)}80%,to{transform:translateX(calc(100vw + 400px))}}@keyframes jkl-blink-uto1ctm{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}}

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

@@ -5,171 +5,173 @@
 $_sweep-animation-name: jkl-sweep-#{string.unique-id()};
 $_blink-animation-name: jkl-blink-#{string.unique-id()};
 
-@include jkl.light-mode-variables {
-    --jkl-skeleton-element-color: #{jkl.$color-varde};
-    --jkl-skeleton-sweeper-color: #{jkl.$color-snohvit};
-}
-
-@include jkl.dark-mode-variables {
-    --jkl-skeleton-element-color: #{jkl.$color-stein};
-    --jkl-skeleton-sweeper-color: #{jkl.$color-granitt};
-}
-
-.jkl-skeleton-animation {
-    --jkl-skeleton-sweep-duration: 3s;
-
-    position: relative;
-    overflow: hidden;
-
-    &::after {
-        content: " ";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: jkl.rem(200px);
-        background: linear-gradient(
-            89.17deg,
-            rgb(249 249 249 / 0%) 0.8%,
-            var(--jkl-skeleton-sweeper-color) 50.09%,
-            rgb(249 249 249 / 0%) 96.31%
-        );
-        animation: var(--jkl-skeleton-sweep-duration) ease infinite
-            $_sweep-animation-name;
+@layer jokul.components {
+    @include jkl.light-mode-variables {
+        --jkl-skeleton-element-color: #{jkl.$color-varde};
+        --jkl-skeleton-sweeper-color: #{jkl.$color-snohvit};
     }
 
-    @include jkl.small-device {
-        width: jkl.rem(150px);
+    @include jkl.dark-mode-variables {
+        --jkl-skeleton-element-color: #{jkl.$color-stein};
+        --jkl-skeleton-sweeper-color: #{jkl.$color-granitt};
     }
 
-    @include jkl.prefers-reduced-motion {
-        &::after {
-            background: none; // Skjul gradienten som nå ikke beveger seg
-        }
-    }
+    .jkl-skeleton-animation {
+        --jkl-skeleton-sweep-duration: 3s;
+
+        position: relative;
+        overflow: hidden;
 
-    @include jkl.forced-colors-mode {
         &::after {
-            // Vi kan ikke bruke "gradient-trikset" for å skape den samme effekten,
-            // så vi må tenke annerledes. Bruk gjennomsiktighet for å indikere at
-            // noe skjer. Animasjonen gjøres på jkl-skeleton-element.
-            animation: none;
+            content: " ";
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: jkl.rem(200px);
+            background: linear-gradient(
+                89.17deg,
+                rgb(249 249 249 / 0%) 0.8%,
+                var(--jkl-skeleton-sweeper-color) 50.09%,
+                rgb(249 249 249 / 0%) 96.31%
+            );
+            animation: var(--jkl-skeleton-sweep-duration) ease infinite
+                $_sweep-animation-name;
         }
-    }
 
-    &--compact::after {
-        width: jkl.rem(150px);
-    }
-}
+        @include jkl.small-device {
+            width: jkl.rem(150px);
+        }
 
-.jkl-skeleton-element {
-    border-radius: jkl.rem(2px);
-    background-color: var(--jkl-skeleton-element-color);
+        @include jkl.prefers-reduced-motion {
+            &::after {
+                background: none; // Skjul gradienten som nå ikke beveger seg
+            }
+        }
 
-    &--circle {
-        border-radius: 50%;
-    }
+        @include jkl.forced-colors-mode {
+            &::after {
+                // Vi kan ikke bruke "gradient-trikset" for å skape den samme effekten,
+                // så vi må tenke annerledes. Bruk gjennomsiktighet for å indikere at
+                // noe skjer. Animasjonen gjøres på jkl-skeleton-element.
+                animation: none;
+            }
+        }
 
-    @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;
+        &--compact::after {
+            width: jkl.rem(150px);
+        }
     }
-}
 
-.jkl-skeleton-input {
-    display: flex;
-    flex-direction: column;
-    gap: jkl.$spacing-12;
+    .jkl-skeleton-element {
+        border-radius: jkl.rem(2px);
+        background-color: var(--jkl-skeleton-element-color);
 
-    &__checkbox {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        gap: jkl.$spacing-8;
-    }
+        &--circle {
+            border-radius: 50%;
+        }
 
-    @include jkl.small-device {
-        gap: jkl.$spacing-8;
+        @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;
+        }
     }
 
-    &--compact::after {
-        gap: jkl.$spacing-8;
-    }
-}
+    .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;
+        }
 
-.jkl-skeleton-table {
-    display: flex;
-    flex-direction: column;
+        @include jkl.small-device {
+            gap: jkl.$spacing-8;
+        }
 
-    &__header,
-    &__row {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        border-bottom: solid 1px var(--jkl-skeleton-element-color);
+        &--compact::after {
+            gap: jkl.$spacing-8;
+        }
     }
 
-    &__header {
-        padding: jkl.$spacing-12 jkl.$spacing-8;
-    }
+    .jkl-skeleton-table {
+        display: flex;
+        flex-direction: column;
 
-    &__row {
-        padding: jkl.$spacing-16 jkl.$spacing-8;
-    }
+        &__header,
+        &__row {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            border-bottom: solid 1px var(--jkl-skeleton-element-color);
+        }
 
-    @include jkl.small-device {
         &__header {
-            padding: jkl.$spacing-8 jkl.$spacing-4;
+            padding: jkl.$spacing-12 jkl.$spacing-8;
         }
 
         &__row {
-            padding: jkl.$spacing-12 jkl.$spacing-4;
+            padding: jkl.$spacing-16 jkl.$spacing-8;
         }
-    }
 
-    &--compact::after {
-        &__header {
-            padding: jkl.$spacing-8 jkl.$spacing-4;
+        @include jkl.small-device {
+            &__header {
+                padding: jkl.$spacing-8 jkl.$spacing-4;
+            }
+
+            &__row {
+                padding: jkl.$spacing-12 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;
+        @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 #{$_sweep-animation-name} {
-    0% {
-        transform: translateX(calc(0vw - 200px));
-    }
+    @keyframes #{$_sweep-animation-name} {
+        0% {
+            transform: translateX(calc(0vw - 200px));
+        }
 
-    80%,
-    100% {
-        transform: translateX(calc(100vw + calc(200px * 2)));
+        80%,
+        100% {
+            transform: translateX(calc(100vw + calc(200px * 2)));
+        }
     }
-}
 
-@keyframes #{$_blink-animation-name} {
-    0% {
-        opacity: 1;
-    }
+    @keyframes #{$_blink-animation-name} {
+        0% {
+            opacity: 1;
+        }
 
-    40%,
-    50% {
-        opacity: 0.3;
-    }
+        40%,
+        50% {
+            opacity: 0.3;
+        }
 
-    70%,
-    100% {
-        opacity: 1;
+        70%,
+        100% {
+            opacity: 1;
+        }
     }
 }