@fremtind/jokul 0.8.1 → 0.10.0

package/src/components/checkbox/styles/checkbox.css

@@ -0,0 +1,191 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-checkbox-font-size: var(--jkl-body-font-size);
+  --jkl-checkbox-line-height: var(--jkl-body-line-height);
+  --jkl-checkbox-font-weight: var(--jkl-body-font-weight);
+  --jkl-checkbox-height: 3rem;
+  --jkl-checkbox-box-size: 1.5rem;
+  --jkl-checkbox-line-height: 2rem;
+}
+@media (width >= 0) and (max-width: 679px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-checkbox-height: 2.5rem;
+    --jkl-checkbox-box-size: 1.5rem;
+    --jkl-checkbox-line-height: 1.75rem;
+  }
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-checkbox-font-size: var(--jkl-small-font-size);
+  --jkl-checkbox-line-height: var(--jkl-small-line-height);
+  --jkl-checkbox-font-weight: var(--jkl-small-font-weight);
+  --jkl-checkbox-height: 1.75rem;
+  --jkl-checkbox-box-size: 1.125rem;
+  --jkl-checkbox-line-height: 1.5rem;
+}
+
+@keyframes jkl-checkbox-checked-u79aa06 {
+  0% {
+    width: 0;
+    height: 0;
+  }
+  40% {
+    width: 18%;
+    height: 0;
+  }
+  100% {
+    width: 18%;
+    height: 58%;
+  }
+}
+@keyframes jkl-checkbox-indeterminate-u79aa0k {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 66%;
+  }
+}
+.jkl-checkbox {
+  --box-color: var(--jkl-color-border-action);
+  --check-color: var(--jkl-color-border-action);
+  --text-color: var(--jkl-color-text-default);
+  --background-color: transparent;
+  font-size: var(--jkl-checkbox-font-size);
+  line-height: var(--jkl-checkbox-line-height);
+  font-weight: var(--jkl-checkbox-font-weight);
+  display: flex;
+  flex-wrap: wrap;
+  min-height: var(--jkl-checkbox-height);
+  color: var(--text-color);
+  position: relative;
+}
+.jkl-checkbox__input {
+  opacity: 0;
+  position: absolute;
+  top: -6px;
+}
+.jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
+  animation: jkl-checkbox-checked-u79aa06 150ms ease-in-out forwards;
+  opacity: 1;
+}
+.jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
+  animation: jkl-checkbox-indeterminate-u79aa0k 150ms ease-in-out forwards;
+  opacity: 1;
+}
+.jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
+  color: var(--jkl-checkbox-focus-color);
+}
+.jkl-checkbox__input:focus-visible + .jkl-checkbox__label > .jkl-checkbox__mark {
+  --background-color: var(--jkl-color-background-input-focus);
+  outline: 2px solid var(--jkl-color-border-action);
+  outline-offset: 2px;
+}
+.jkl-checkbox__input:disabled + .jkl-checkbox__label {
+  color: var(--jkl-checkbox-disabled-color);
+}
+.jkl-checkbox__label {
+  display: flex;
+  min-width: 0;
+  max-width: 100%;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.jkl-checkbox__label:hover .jkl-checkbox__mark, .jkl-checkbox__label:active .jkl-checkbox__mark {
+  outline: 1px solid var(--box-color);
+}
+.jkl-checkbox__label:active {
+  --background-color: var(--jkl-color-background-input-focus);
+}
+.jkl-checkbox__text {
+  margin: calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height)) * 0.5) 0;
+  translate: 0 0.0625rem;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: color;
+}
+.jkl-checkbox__mark {
+  box-sizing: border-box;
+  position: relative;
+  height: var(--jkl-checkbox-box-size);
+  width: var(--jkl-checkbox-box-size);
+  margin-block: calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size)) * 0.5);
+  margin-inline-end: var(--jkl-spacing-8);
+  align-self: flex-start;
+  flex-shrink: 0;
+  outline: none;
+  border-radius: 0;
+  border: 1px solid;
+  border-color: var(--box-color);
+  background-color: var(--background-color);
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: background-color;
+}
+@media screen and (forced-colors: active) {
+  .jkl-checkbox__mark {
+    outline: revert;
+    border: 1px solid ButtonText;
+  }
+}
+.jkl-checkbox__check-mark::after {
+  content: "";
+  position: absolute;
+  transform-origin: bottom left;
+  bottom: 42%;
+  left: 18%;
+  display: block;
+  width: 18%;
+  height: 58%;
+  transform: rotate(45deg);
+  border: solid 0.125rem var(--check-color);
+  border-left-width: 0;
+  border-top-width: 0;
+  opacity: 0;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: opacity, border-color;
+}
+@media screen and (forced-colors: active) {
+  .jkl-checkbox__check-mark::after {
+    border-color: ButtonText;
+  }
+}
+.jkl-checkbox__indeterminate-mark::after {
+  --width: 66%;
+  --thickness: 0.125rem;
+  content: "";
+  position: absolute;
+  bottom: calc(50% - var(--thickness) / 2);
+  left: calc((100% - var(--width)) / 2);
+  display: block;
+  width: var(--width);
+  border-bottom: solid var(--thickness) var(--check-color);
+  opacity: 0;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: opacity, border-color;
+}
+@media screen and (forced-colors: active) {
+  .jkl-checkbox__indeterminate-mark::after {
+    border-color: ButtonText;
+  }
+}
+.jkl-checkbox--inline {
+  display: inline-flex;
+}
+.jkl-checkbox--inline:not(:last-of-type) {
+  margin-right: 1.5rem;
+}
+.jkl-checkbox--error {
+  --background-color: var(--jkl-color-background-alert-error);
+  --check-color: var(--jkl-color-text-on-alert);
+}

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

@@ -0,0 +1 @@
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-u79aa06{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-u79aa0k{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{opacity:0;position:absolute;top:-6px}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-u79aa06 .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-u79aa0k .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{--background-color:var(--jkl-color-background-input-focus);outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__label:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;box-sizing:border-box;flex-shrink:0;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);margin-inline-end:var(--jkl-spacing-8);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:1.5rem}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}

package/src/components/checkbox/styles/checkbox.scss

@@ -0,0 +1,229 @@
+@charset "UTF-8";
+@use "sass:string";
+@use "../../../core/jkl";
+@use "../../../core/jkl/colors";
+
+@include jkl.comfortable-density-variables {
+    @include jkl.declare-font-variables("jkl-checkbox", "body");
+
+    --jkl-checkbox-height: #{jkl.rem(48px)};
+    --jkl-checkbox-box-size: #{jkl.rem(24px)};
+    --jkl-checkbox-line-height: #{jkl.rem(32px)};
+
+    @include jkl.small-device {
+        --jkl-checkbox-height: #{jkl.rem(40px)};
+        --jkl-checkbox-box-size: #{jkl.rem(24px)};
+        --jkl-checkbox-line-height: #{jkl.rem(28px)};
+    }
+}
+
+@include jkl.compact-density-variables {
+    @include jkl.declare-font-variables("jkl-checkbox", "small");
+
+    --jkl-checkbox-height: #{jkl.rem(28px)};
+    --jkl-checkbox-box-size: #{jkl.rem(18px)};
+    --jkl-checkbox-line-height: #{jkl.rem(24px)};
+}
+
+$_checkbox-checked-animation-name: jkl-checkbox-checked-#{string.unique-id()};
+$_checkbox-indeterminate-animation-name: jkl-checkbox-indeterminate-#{string.unique-id()};
+
+@keyframes #{$_checkbox-checked-animation-name} {
+    0% {
+        width: 0;
+        height: 0;
+    }
+
+    40% {
+        width: 18%;
+        height: 0;
+    }
+
+    100% {
+        width: 18%;
+        height: 58%;
+    }
+}
+
+@keyframes #{$_checkbox-indeterminate-animation-name} {
+    0% {
+        width: 0;
+    }
+
+    100% {
+        width: 66%;
+    }
+}
+
+.jkl-checkbox {
+    --box-color: var(--jkl-color-border-action);
+    --check-color: var(--jkl-color-border-action);
+    --text-color: var(--jkl-color-text-default);
+    --background-color: transparent;
+
+    @include jkl.use-font-variables("jkl-checkbox");
+
+    display: flex;
+    flex-wrap: wrap;
+    min-height: var(--jkl-checkbox-height);
+    color: var(--text-color);
+    position: relative;
+
+    &__input {
+        // Hide native checkbox
+        opacity: 0;
+        position: absolute;
+        // Position the hidden input so that Cypress can hit it without it being obscured by the visual checkbox
+        top: -6px;
+
+        // Checked state:
+        &:checked {
+            + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
+                animation: $_checkbox-checked-animation-name jkl.timing("productive") ease-in-out forwards;
+                opacity: 1;
+            }
+        }
+
+        // Indeterminate state:
+        &:indeterminate:not(:checked) {
+            + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
+                animation: $_checkbox-indeterminate-animation-name jkl.timing("productive") ease-in-out forwards;
+                opacity: 1;
+            }
+        }
+
+        // Focused state:
+        &:focus-visible + .jkl-checkbox__label {
+            color: var(--jkl-checkbox-focus-color);
+
+            & > .jkl-checkbox__mark {
+                --background-color: var(--jkl-color-background-input-focus);
+                @include jkl.focus-outline;
+            }
+        }
+
+        // Disabled state:
+        &:disabled + .jkl-checkbox__label {
+            color: var(--jkl-checkbox-disabled-color);
+        }
+    }
+
+    &__label {
+        display: flex;
+        min-width: 0;
+        max-width: 100%;
+        cursor: pointer;
+        flex-shrink: 0;
+
+        &:hover,
+        &:active {
+            .jkl-checkbox__mark {
+                outline: 1px solid var(--box-color);
+            }
+        }
+
+        &:active {
+            --background-color: var(--jkl-color-background-input-focus);
+        }
+    }
+
+    &__text {
+        margin: calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height)) * 0.5) 0;
+        translate: 0 jkl.rem(1px);
+
+        @include jkl.motion;
+        transition-property: color;
+    }
+
+    &__mark {
+        box-sizing: border-box;
+        position: relative;
+        height: var(--jkl-checkbox-box-size);
+        width: var(--jkl-checkbox-box-size);
+
+        margin-block: calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size)) * 0.5);
+        margin-inline-end: var(--jkl-spacing-8);
+        align-self: flex-start;
+        flex-shrink: 0; // Don't allow the mark to shrink in case of really long text
+
+        outline: none;
+        border-radius: 0; // fixes rounded corners in iOS Safari
+        border: 1px solid;
+        border-color: var(--box-color);
+        background-color: var(--background-color);
+        @include jkl.motion;
+        transition-property: background-color;
+
+        @include jkl.forced-colors-mode {
+            outline: revert;
+            border: 1px solid ButtonText;
+        }
+    }
+
+    // This is the check marker
+    &__check-mark {
+        &::after {
+            content: "";
+            position: absolute;
+            transform-origin: bottom left;
+            bottom: 42%;
+            left: 18%;
+
+            display: block;
+            width: 18%;
+            height: 58%;
+            transform: rotate(45deg);
+
+            border: solid jkl.rem(2px) var(--check-color);
+            border-left-width: 0;
+            border-top-width: 0;
+
+            opacity: 0;
+            @include jkl.motion;
+            transition-property: opacity, border-color;
+
+            @include jkl.forced-colors-mode {
+                border-color: ButtonText;
+            }
+        }
+    }
+
+    // This is the indeterminate marker
+    &__indeterminate-mark {
+        &::after {
+            --width: 66%;
+            --thickness: #{jkl.rem(2px)};
+
+            content: "";
+            position: absolute;
+            bottom: calc(50% - (var(--thickness) / 2));
+            left: calc((100% - var(--width)) / 2);
+
+            display: block;
+            width: var(--width);
+
+            border-bottom: solid var(--thickness) var(--check-color);
+
+            opacity: 0;
+            @include jkl.motion;
+            transition-property: opacity, border-color;
+
+            @include jkl.forced-colors-mode {
+                border-color: ButtonText;
+            }
+        }
+    }
+
+    &--inline {
+        display: inline-flex;
+
+        &:not(:last-of-type) {
+            margin-right: jkl.$spacing-24;
+        }
+    }
+
+    &--error {
+        --background-color: var(--jkl-color-background-alert-error);
+        --check-color: var(--jkl-color-text-on-alert);
+    }
+}

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

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