@fremtind/jokul 1.4.1 → 1.5.1

package/styles/components/logo/logo.css

@@ -1,92 +1,92 @@
 /**
- * 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-logo-color: #1b1917;
+    }
+  }
+  [data-theme=light] {
     --jkl-logo-color: #1b1917;
   }
-}
-[data-theme=light] {
-  --jkl-logo-color: #1b1917;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
+  @media screen and (prefers-color-scheme: dark) {
+    :root {
+      --jkl-logo-color: #f9f9f9;
+    }
+  }
+  [data-theme=dark] {
     --jkl-logo-color: #f9f9f9;
   }
-}
-[data-theme=dark] {
-  --jkl-logo-color: #f9f9f9;
-}
-
-.jkl-logo {
-  color: var(--jkl-logo-color);
-}
-@media screen and (forced-colors: active) {
   .jkl-logo {
-    stroke: CanvasText;
-    fill: CanvasText;
-  }
-  .jkl-logo svg, .jkl-logo path {
-    stroke: CanvasText;
-    fill: CanvasText;
-  }
-}
-.jkl-logo__F {
-  transform-origin: 30px 132px; /* Is connected to the viewbox of the logo, change at your own risk */
-}
-.jkl-logo__F-line {
-  transform-origin: 34.3px; /* Must be the same as the line x1 origin, change at your own risk */
-}
-.jkl-logo__remtind {
-  opacity: 1;
-}
-.jkl-logo--symbol-only .jkl-logo__F {
-  transform: rotate(45deg);
-}
-.jkl-logo--symbol-only .jkl-logo__F-line {
-  transform: scaleX(1.5);
-}
-.jkl-logo--symbol-only .jkl-logo__remtind {
-  transition-delay: 0ms;
-  opacity: 0;
-  transform: translateX(-5%);
-}
-.jkl-logo--animated .jkl-logo__F {
-  transition: transform 250ms 75ms cubic-bezier(0.5, 0, 0.62, 1);
-}
-.jkl-logo--animated .jkl-logo__F-line {
-  transition: transform 250ms ease-in;
-}
-.jkl-logo--animated .jkl-logo__remtind {
-  transition: opacity 250ms 75ms ease-in, transform 250ms ease;
-}
-
-.jkl-logo--centered.jkl-logo--symbol-only .jkl-logo__F {
-  transform: translateX(35%) rotate(45deg);
-}
-
-.jkl-logo-stamp {
-  color: var(--logo-stamp-color);
-}
-@media screen and (forced-colors: active) {
+    color: var(--jkl-logo-color);
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-logo {
+      stroke: CanvasText;
+      fill: CanvasText;
+    }
+    .jkl-logo svg, .jkl-logo path {
+      stroke: CanvasText;
+      fill: CanvasText;
+    }
+  }
+  .jkl-logo__F {
+    transform-origin: 30px 132px; /* Is connected to the viewbox of the logo, change at your own risk */
+  }
+  .jkl-logo__F-line {
+    transform-origin: 34.3px; /* Must be the same as the line x1 origin, change at your own risk */
+  }
+  .jkl-logo__remtind {
+    opacity: 1;
+  }
+  .jkl-logo--symbol-only .jkl-logo__F {
+    transform: rotate(45deg);
+  }
+  .jkl-logo--symbol-only .jkl-logo__F-line {
+    transform: scaleX(1.5);
+  }
+  .jkl-logo--symbol-only .jkl-logo__remtind {
+    transition-delay: 0ms;
+    opacity: 0;
+    transform: translateX(-5%);
+  }
+  .jkl-logo--animated .jkl-logo__F {
+    transition: transform 250ms 75ms cubic-bezier(0.5, 0, 0.62, 1);
+  }
+  .jkl-logo--animated .jkl-logo__F-line {
+    transition: transform 250ms ease-in;
+  }
+  .jkl-logo--animated .jkl-logo__remtind {
+    transition: opacity 250ms 75ms ease-in, transform 250ms ease;
+  }
+  .jkl-logo--centered.jkl-logo--symbol-only .jkl-logo__F {
+    transform: translateX(35%) rotate(45deg);
+  }
   .jkl-logo-stamp {
-    stroke: CanvasText;
-    fill: CanvasText;
-  }
-  .jkl-logo-stamp svg, .jkl-logo-stamp path {
-    stroke: CanvasText;
-    fill: CanvasText;
-  }
-}
-.jkl-logo-stamp--animated .jkl-logo-stamp__text {
-  transform-origin: 256px 256px;
-  transition-timing-function: cubic-bezier(0.75, 0, 0, 1);
-  transition-duration: 150ms;
-  transition-property: transform;
-}
-.jkl-logo-stamp--animated[data-rotate=true] .jkl-logo-stamp__text {
-  transition-duration: 1500ms;
-  transform: rotate(360deg);
+    color: var(--logo-stamp-color);
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-logo-stamp {
+      stroke: CanvasText;
+      fill: CanvasText;
+    }
+    .jkl-logo-stamp svg, .jkl-logo-stamp path {
+      stroke: CanvasText;
+      fill: CanvasText;
+    }
+  }
+  .jkl-logo-stamp--animated .jkl-logo-stamp__text {
+    transform-origin: 256px 256px;
+    transition-timing-function: cubic-bezier(0.75, 0, 0, 1);
+    transition-duration: 150ms;
+    transition-property: transform;
+  }
+  .jkl-logo-stamp--animated[data-rotate=true] .jkl-logo-stamp__text {
+    transition-duration: 1500ms;
+    transform: rotate(360deg);
+  }
 }

package/styles/components/logo/logo.min.css

@@ -1 +1 @@
-@media screen and (prefers-color-scheme:light){:root{--jkl-logo-color:#1b1917}}[data-theme=light]{--jkl-logo-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-logo-color:#f9f9f9}}[data-theme=dark]{--jkl-logo-color:#f9f9f9}.jkl-logo{color:var(--jkl-logo-color)}@media screen and (forced-colors:active){.jkl-logo,.jkl-logo path,.jkl-logo svg{stroke:CanvasText;fill:CanvasText}}.jkl-logo__F{transform-origin:30px 132px}.jkl-logo__F-line{transform-origin:34.3px}.jkl-logo__remtind{opacity:1}.jkl-logo--symbol-only .jkl-logo__F{transform:rotate(45deg)}.jkl-logo--symbol-only .jkl-logo__F-line{transform:scaleX(1.5)}.jkl-logo--symbol-only .jkl-logo__remtind{opacity:0;transform:translateX(-5%);transition-delay:0s}.jkl-logo--animated .jkl-logo__F{transition:transform .25s cubic-bezier(.5,0,.62,1) 75ms}.jkl-logo--animated .jkl-logo__F-line{transition:transform .25s ease-in}.jkl-logo--animated .jkl-logo__remtind{transition:opacity .25s ease-in 75ms,transform .25s ease}.jkl-logo--centered.jkl-logo--symbol-only .jkl-logo__F{transform:translateX(35%) rotate(45deg)}.jkl-logo-stamp{color:var(--logo-stamp-color)}@media screen and (forced-colors:active){.jkl-logo-stamp,.jkl-logo-stamp path,.jkl-logo-stamp svg{stroke:CanvasText;fill:CanvasText}}.jkl-logo-stamp--animated .jkl-logo-stamp__text{transform-origin:256px 256px;transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.75,0,0,1)}.jkl-logo-stamp--animated[data-rotate=true] .jkl-logo-stamp__text{transform:rotate(1turn);transition-duration:1.5s}
+@layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-logo-color:#1b1917}}[data-theme=light]{--jkl-logo-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-logo-color:#f9f9f9}}[data-theme=dark]{--jkl-logo-color:#f9f9f9}.jkl-logo{color:var(--jkl-logo-color)}@media screen and (forced-colors:active){.jkl-logo,.jkl-logo path,.jkl-logo svg{stroke:CanvasText;fill:CanvasText}}.jkl-logo__F{transform-origin:30px 132px}.jkl-logo__F-line{transform-origin:34.3px}.jkl-logo__remtind{opacity:1}.jkl-logo--symbol-only .jkl-logo__F{transform:rotate(45deg)}.jkl-logo--symbol-only .jkl-logo__F-line{transform:scaleX(1.5)}.jkl-logo--symbol-only .jkl-logo__remtind{opacity:0;transform:translateX(-5%);transition-delay:0s}.jkl-logo--animated .jkl-logo__F{transition:transform .25s cubic-bezier(.5,0,.62,1) 75ms}.jkl-logo--animated .jkl-logo__F-line{transition:transform .25s ease-in}.jkl-logo--animated .jkl-logo__remtind{transition:opacity .25s ease-in 75ms,transform .25s ease}.jkl-logo--centered.jkl-logo--symbol-only .jkl-logo__F{transform:translateX(35%) rotate(45deg)}.jkl-logo-stamp{color:var(--logo-stamp-color)}@media screen and (forced-colors:active){.jkl-logo-stamp,.jkl-logo-stamp path,.jkl-logo-stamp svg{stroke:CanvasText;fill:CanvasText}}.jkl-logo-stamp--animated .jkl-logo-stamp__text{transform-origin:256px 256px;transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.75,0,0,1)}.jkl-logo-stamp--animated[data-rotate=true] .jkl-logo-stamp__text{transform:rotate(1turn);transition-duration:1.5s}}

package/styles/components/logo/logo.scss

@@ -1,96 +1,100 @@
 @charset "UTF-8";
 @use "../../core/jkl";
 
-@include jkl.light-mode-variables {
-    --jkl-logo-color: #{jkl.$color-granitt};
-}
+@layer jokul.components {
+    @include jkl.light-mode-variables {
+        --jkl-logo-color: #{jkl.$color-granitt};
+    }
 
-@include jkl.dark-mode-variables {
-    --jkl-logo-color: #{jkl.$color-snohvit};
-}
+    @include jkl.dark-mode-variables {
+        --jkl-logo-color: #{jkl.$color-snohvit};
+    }
 
-.jkl-logo {
-    color: var(--jkl-logo-color);
+    .jkl-logo {
+        color: var(--jkl-logo-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
-    );
+        // 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 {
-        transform-origin: 30px 132px; /* Is connected to the viewbox of the logo, change at your own risk */
+        &__F {
+            transform-origin: 30px
+                132px; /* Is connected to the viewbox of the logo, change at your own risk */
 
-        &-line {
-            transform-origin: 34.3px; /* Must be the same as the line x1 origin, change at your own risk */
+            &-line {
+                transform-origin: 34.3px; /* Must be the same as the line x1 origin, change at your own risk */
+            }
         }
-    }
 
-    &__remtind {
-        opacity: 1;
-    }
+        &__remtind {
+            opacity: 1;
+        }
 
-    &--symbol-only {
-        & .jkl-logo__F {
-            transform: rotate(45deg);
+        &--symbol-only {
+            & .jkl-logo__F {
+                transform: rotate(45deg);
 
-            &-line {
-                transform: scaleX(1.5);
+                &-line {
+                    transform: scaleX(1.5);
+                }
             }
-        }
 
-        & .jkl-logo__remtind {
-            transition-delay: 0ms;
-            opacity: 0;
-            transform: translateX(-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);
-        }
+        &--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__F-line {
+                transition: transform jkl.timing("expressive") ease-in;
+            }
 
-        & .jkl-logo__remtind {
-            transition: opacity jkl.timing("expressive") jkl.timing("energetic")
+            & .jkl-logo__remtind {
+                transition:
+                    opacity jkl.timing("expressive") jkl.timing("energetic")
                     ease-in,
-                transform jkl.timing("expressive") ease;
+                    transform jkl.timing("expressive") ease;
+            }
         }
     }
-}
 
-.jkl-logo--centered.jkl-logo--symbol-only {
-    & .jkl-logo__F {
-        transform: translateX(35%) rotate(45deg);
+    .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;
-        }
+    .jkl-logo-stamp {
+        color: var(--logo-stamp-color);
 
-        &[data-rotate="true"] {
+        // 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 {
-                transition-duration: 1500ms;
-                transform: rotate(360deg);
+                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/_menu-divider.scss

@@ -1,8 +1,10 @@
 @use "../../core/jkl";
 
-.jkl-menu-divider {
-    width: 100%;
-    margin-block: 0;
-    border: none;
-    border-bottom: jkl.rem(1px) solid var(--jkl-color-border-separator);
+@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,69 +1,71 @@
 @use "../../core/jkl";
 
-@include jkl.comfortable-density-variables {
-    --jkl-menu-item-height: #{jkl.rem(48px)};
-    --jkl-menu-item-padding: #{jkl.$unit-10} #{jkl.$unit-30};
+@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.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.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");
-}
+        @include jkl.declare-font-variables("jkl-menu-item", "small");
+    }
 
-.jkl-menu-item {
-    --background-color: var(--jkl-color-background-interactive);
+    .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;
+        background-color: var(--background-color);
+        color: var(--jkl-color-text-default);
+        cursor: pointer;
+        text-decoration: none;
 
-    box-sizing: border-box;
-    user-select: 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.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;
+        @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%;
-    }
+        &__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;
-    }
+        &__icon {
+            display: flex;
+            align-items: center;
+            flex-shrink: 0;
+        }
 
-    &__arrow {
-        display: flex;
-        align-items: center;
-    }
+        &__arrow {
+            display: flex;
+            align-items: center;
+        }
 
-    &__chevron {
-        flex-shrink: 0;
-    }
+        &__chevron {
+            flex-shrink: 0;
+        }
 
-    &:hover,
-    &:focus-visible {
-        --background-color: var(--jkl-color-background-interactive-hover);
+        &:hover,
+        &:focus-visible {
+            --background-color: var(--jkl-color-background-interactive-hover);
+        }
     }
-}
+}