@fremtind/jokul 0.8.1 → 0.10.0

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

@@ -0,0 +1,180 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-radio-button-height: 3rem;
+  --jkl-radio-button-line-height: 2rem;
+  --jkl-radio-button-size: 1.5rem;
+  --jkl-radio-button-text-margin: 0.5rem 0;
+  --jkl-radio-button-text-transform: translate3d(0, 0.0625rem, 0);
+  --jkl-radio-button-dot-margin: 0.75rem 0.5rem 0.75rem 0;
+  --jkl-radio-button-dot-size: 1rem;
+  --jkl-radio-button-label-font-size: var(--jkl-body-font-size);
+  --jkl-radio-button-label-line-height: var(--jkl-body-line-height);
+  --jkl-radio-button-label-font-weight: var(--jkl-body-font-weight);
+}
+@media (width >= 0) and (max-width: 679px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-radio-button-height: 2.5rem;
+    --jkl-radio-button-line-height: 1.75rem;
+    --jkl-radio-button-size: 1.5rem;
+    --jkl-radio-button-text-margin: 0.5rem 0;
+    --jkl-radio-button-text-transform: translate3d(0, 0, 0);
+    --jkl-radio-button-dot-margin: 0.625rem 0.5rem 0.625rem 0;
+    --jkl-radio-button-dot-size: 1rem;
+  }
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-radio-button-height: 1.75rem;
+  --jkl-radio-button-line-height: 1.5rem;
+  --jkl-radio-button-size: 1.125rem;
+  --jkl-radio-button-text-margin: 0.25rem 0;
+  --jkl-radio-button-text-transform: translate3d(0, 0, 0);
+  --jkl-radio-button-dot-margin: 0.4375rem 0.5rem 0.4375rem 0;
+  --jkl-radio-button-dot-size: 0.625rem;
+  --jkl-radio-button-label-font-size: var(--jkl-small-font-size);
+  --jkl-radio-button-label-line-height: var(--jkl-small-line-height);
+  --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
+}
+
+@keyframes jkl-dot-in-u09uvyn {
+  0% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.jkl-radio-button {
+  --ring-color: var(--jkl-color-border-action);
+  --dot-color: transparent;
+  --background-color: transparent;
+  --text-color: var(--jkl-color-text-default);
+  display: flex;
+  min-height: var(--jkl-radio-button-height);
+  color: var(--text-color);
+  position: relative;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-radio-button:active, .jkl-radio-button:hover, .jkl-radio-button:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-radio-button {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-radio-button:active, .jkl-radio-button:hover, .jkl-radio-button:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-radio-button__input {
+  position: absolute;
+  opacity: 0;
+  top: -6px;
+}
+.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
+  --dot-color: var(--jkl-color-border-action);
+  animation: jkl-dot-in-u09uvyn 150ms ease;
+}
+@media screen and (forced-colors: active) {
+  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
+    background-color: ButtonText;
+  }
+}
+.jkl-radio-button--error .jkl-radio-button__input:checked + .jkl-radio-button__label {
+  --background-color: var(--jkl-color-background-alert-error);
+  --dot-color: var(--jkl-color-text-on-alert);
+}
+.jkl-radio-button__input:focus-visible + .jkl-radio-button__label {
+  --background-color: var(--jkl-color-background-input-focus);
+}
+.jkl-radio-button__input:focus-visible + .jkl-radio-button__label > .jkl-radio-button__dot {
+  outline: 2px solid var(--jkl-color-border-action);
+  outline-offset: 2px;
+}
+.jkl-radio-button--error .jkl-radio-button__input:focus-visible + .jkl-radio-button__label {
+  --background-color: var(--jkl-color-background-alert-error);
+  --dot-color: var(--jkl-color-text-on-alert);
+}
+.jkl-radio-button__label {
+  cursor: pointer;
+  display: flex;
+  align-items: flex-start;
+  font-size: var(--jkl-radio-button-label-font-size);
+  line-height: var(--jkl-radio-button-label-line-height);
+  font-weight: var(--jkl-radio-button-label-font-weight);
+}
+.jkl-radio-button__label:hover > .jkl-radio-button__dot {
+  outline: 1px solid var(--ring-color);
+}
+.jkl-radio-button__label:active > .jkl-radio-button__dot .jkl-radio-button__label::after {
+  scale: 0.9;
+}
+.jkl-radio-button__dot {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  margin: var(--jkl-radio-button-dot-margin);
+  flex-shrink: 0;
+  height: var(--jkl-radio-button-size);
+  width: var(--jkl-radio-button-size);
+  border-radius: 50%;
+  border: 0.0625rem solid var(--ring-color);
+  background-color: var(--background-color);
+  transition-property: background-color, outline;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  /* Inner dot */
+}
+.jkl-radio-button__dot::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  translate: -50% -50%;
+  scale: 1;
+  height: var(--jkl-radio-button-dot-size);
+  width: var(--jkl-radio-button-dot-size);
+  border-radius: 50%;
+  background-color: var(--dot-color);
+  transition-property: transform;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+}
+@media screen and (forced-colors: active) {
+  .jkl-radio-button__dot {
+    outline: revert;
+    border: 1px solid ButtonText;
+  }
+}
+.jkl-radio-button__text {
+  display: inline-block;
+  margin: var(--jkl-radio-button-text-margin);
+  transform: var(--jkl-radio-button-text-transform);
+}
+.jkl-radio-button--error {
+  --background-color: var(--jkl-color-background-alert-error);
+}
+.jkl-radio-button--inline {
+  display: inline-flex;
+  margin-top: unset;
+  margin-right: 1.5rem;
+}
+.jkl-radio-button + .jkl-form-support-label {
+  margin-left: calc(var(--jkl-radio-button-size) + 0.5rem);
+  margin-top: -0.375rem;
+  margin-bottom: 0.5rem;
+}

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

@@ -0,0 +1 @@
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:3rem;--jkl-radio-button-line-height:2rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0.0625rem,0);--jkl-radio-button-dot-margin:0.75rem 0.5rem 0.75rem 0;--jkl-radio-button-dot-size:1rem;--jkl-radio-button-label-font-size:var(--jkl-body-font-size);--jkl-radio-button-label-line-height:var(--jkl-body-line-height);--jkl-radio-button-label-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:2.5rem;--jkl-radio-button-line-height:1.75rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.625rem 0.5rem 0.625rem 0;--jkl-radio-button-dot-size:1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-radio-button-height:1.75rem;--jkl-radio-button-line-height:1.5rem;--jkl-radio-button-size:1.125rem;--jkl-radio-button-text-margin:0.25rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.4375rem 0.5rem 0.4375rem 0;--jkl-radio-button-dot-size:0.625rem;--jkl-radio-button-label-font-size:var(--jkl-small-font-size);--jkl-radio-button-label-line-height:var(--jkl-small-line-height);--jkl-radio-button-label-font-weight:var(--jkl-small-font-weight)}@keyframes jkl-dot-in-u09uvyn{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-button{--ring-color:var(--jkl-color-border-action);--dot-color:#0000;--background-color:#0000;--text-color:var(--jkl-color-text-default);border-style:none;color:var(--text-color);display:flex;min-height:var(--jkl-radio-button-height);position:relative}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{opacity:0;position:absolute;top:-6px}.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--dot-color:var(--jkl-color-border-action);animation:jkl-dot-in-u09uvyn .15s ease}@media screen and (forced-colors:active){.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{background-color:ButtonText}}.jkl-radio-button--error .jkl-radio-button__input:checked+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-input-focus)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label>.jkl-radio-button__dot{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-radio-button--error .jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__label{align-items:flex-start;cursor:pointer;display:flex;font-size:var(--jkl-radio-button-label-font-size);font-weight:var(--jkl-radio-button-label-font-weight);line-height:var(--jkl-radio-button-label-line-height)}.jkl-radio-button__label:hover>.jkl-radio-button__dot{outline:1px solid var(--ring-color)}.jkl-radio-button__label:active>.jkl-radio-button__dot .jkl-radio-button__label:after{scale:.9}.jkl-radio-button__dot{background-color:var(--background-color);border:.0625rem solid var(--ring-color);border-radius:50%;box-sizing:border-box;display:inline-block;flex-shrink:0;height:var(--jkl-radio-button-size);margin:var(--jkl-radio-button-dot-margin);position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:var(--jkl-radio-button-size)}.jkl-radio-button__dot:after{background-color:var(--dot-color);border-radius:50%;content:"";height:var(--jkl-radio-button-dot-size);left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:var(--jkl-radio-button-dot-size)}@media screen and (forced-colors:active){.jkl-radio-button__dot{border:1px solid ButtonText;outline:revert}}.jkl-radio-button__text{display:inline-block;margin:var(--jkl-radio-button-text-margin);transform:var(--jkl-radio-button-text-transform)}.jkl-radio-button--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-radio-button--inline{display:inline-flex;margin-right:1.5rem;margin-top:unset}.jkl-radio-button+.jkl-form-support-label{margin-bottom:.5rem;margin-left:calc(var(--jkl-radio-button-size) + .5rem);margin-top:-.375rem}

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

@@ -0,0 +1,201 @@
+@charset "UTF-8";
+@use "sass:string";
+@use "../../../core/jkl";
+@use "../../../core/jkl/colors";
+
+$_radio-button-dot-padding: jkl.rem(4px);
+$_radio-button-dot-animation-name: jkl-dot-in-#{string.unique-id()};
+
+@include jkl.comfortable-density-variables {
+    $_radio-button-height: jkl.rem(48px);
+    $_radio-button-line-height: jkl.rem(32px);
+    $_radio-button-size: jkl.rem(24px);
+
+    --jkl-radio-button-height: #{$_radio-button-height};
+    --jkl-radio-button-line-height: #{$_radio-button-line-height};
+    --jkl-radio-button-size: #{$_radio-button-size};
+    --jkl-radio-button-text-margin: #{(($_radio-button-height - $_radio-button-line-height) * 0.5)} 0;
+    --jkl-radio-button-text-transform: translate3d(0, #{jkl.rem(1px)}, 0);
+    --jkl-radio-button-dot-margin: #{(($_radio-button-height - $_radio-button-size) * 0.5)} #{jkl.$spacing-xs} #{(
+            ($_radio-button-height - $_radio-button-size) * 0.5
+        )} 0;
+    --jkl-radio-button-dot-size: #{$_radio-button-size - (2 * $_radio-button-dot-padding)};
+
+    @include jkl.declare-font-variables("jkl-radio-button-label", "body");
+
+    @include jkl.small-device {
+        $_mobile-radio-button-height: jkl.rem(40px);
+        $_mobile-radio-button-size: jkl.rem(24px);
+        $_mobile-radio-button-line-height: jkl.rem(28px);
+
+        --jkl-radio-button-height: #{$_mobile-radio-button-height};
+        --jkl-radio-button-line-height: #{$_mobile-radio-button-line-height};
+        --jkl-radio-button-size: #{$_mobile-radio-button-size};
+        --jkl-radio-button-text-margin: #{jkl.$spacing-8} 0;
+        --jkl-radio-button-text-transform: translate3d(0, 0, 0);
+        --jkl-radio-button-dot-margin: #{jkl.rem(10px)} #{jkl.$spacing-xs} #{jkl.rem(10px)} 0;
+        --jkl-radio-button-dot-size: #{$_mobile-radio-button-size - (2 * $_radio-button-dot-padding)};
+    }
+}
+
+@include jkl.compact-density-variables {
+    $_compact-radio-button-height: jkl.rem(28px);
+    $_compact-radio-button-size: jkl.rem(18px);
+    $_compact-radio-button-line-height: jkl.rem(24px);
+
+    --jkl-radio-button-height: #{$_compact-radio-button-height};
+    --jkl-radio-button-line-height: #{$_compact-radio-button-line-height};
+    --jkl-radio-button-size: #{$_compact-radio-button-size};
+    --jkl-radio-button-text-margin: #{jkl.$spacing-4} 0;
+    --jkl-radio-button-text-transform: translate3d(0, 0, 0);
+    --jkl-radio-button-dot-margin: #{jkl.rem(7px)} #{jkl.$spacing-xs} #{jkl.rem(7px)} 0;
+    --jkl-radio-button-dot-size: #{$_compact-radio-button-size - (2 * $_radio-button-dot-padding)};
+
+    @include jkl.declare-font-variables("jkl-radio-button-label", "small");
+}
+
+@keyframes #{$_radio-button-dot-animation-name} {
+    0% {
+        transform: scale(0.8);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+.jkl-radio-button {
+    --ring-color: var(--jkl-color-border-action);
+    --dot-color: transparent;
+    --background-color: transparent;
+    --text-color: var(--jkl-color-text-default);
+
+    display: flex;
+    min-height: var(--jkl-radio-button-height);
+    color: var(--text-color);
+    position: relative;
+
+    @include jkl.reset-outline;
+
+    &__input {
+        // hide default radio button
+        position: absolute;
+        opacity: 0;
+        // Position the hidden input so that Cypress can hit it without it being obscured by the visual checkbox
+        top: -6px;
+
+        // Checked state
+        &:checked {
+            + .jkl-radio-button__label > .jkl-radio-button__dot::after {
+                --dot-color: var(--jkl-color-border-action);
+                animation: $_radio-button-dot-animation-name jkl.timing("productive") ease;
+
+                @include jkl.forced-colors-mode {
+                    background-color: ButtonText;
+                }
+            }
+
+            .jkl-radio-button--error & + .jkl-radio-button__label {
+                --background-color: var(--jkl-color-background-alert-error);
+                --dot-color: var(--jkl-color-text-on-alert);
+            }
+        }
+
+        // Focused state
+        &:focus-visible {
+            + .jkl-radio-button__label {
+                --background-color: var(--jkl-color-background-input-focus);
+
+                & > .jkl-radio-button__dot {
+                    @include jkl.focus-outline;
+                }
+            }
+
+            .jkl-radio-button--error & + .jkl-radio-button__label {
+                --background-color: var(--jkl-color-background-alert-error);
+                --dot-color: var(--jkl-color-text-on-alert);
+            }
+        }
+    }
+
+    &__label {
+        cursor: pointer;
+        display: flex;
+        align-items: flex-start;
+
+        @include jkl.use-font-variables("jkl-radio-button-label");
+
+        // Hovered state
+        &:hover > .jkl-radio-button__dot {
+            outline: 1px solid var(--ring-color);
+        }
+
+        // Active state
+        &:active > .jkl-radio-button__dot &::after {
+            scale: 0.9;
+        }
+    }
+
+    &__dot {
+        display: inline-block;
+        position: relative;
+        box-sizing: border-box;
+        margin: var(--jkl-radio-button-dot-margin);
+        flex-shrink: 0;
+
+        height: var(--jkl-radio-button-size);
+        width: var(--jkl-radio-button-size);
+        border-radius: 50%;
+        border: jkl.rem(1px) solid var(--ring-color);
+        background-color: var(--background-color);
+
+        transition-property: background-color, outline;
+        @include jkl.motion;
+
+        /* Inner dot */
+        &::after {
+            content: "";
+
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            translate: -50% -50%;
+            scale: 1;
+
+            height: var(--jkl-radio-button-dot-size);
+            width: var(--jkl-radio-button-dot-size);
+            border-radius: 50%;
+            background-color: var(--dot-color);
+
+            transition-property: transform;
+            @include jkl.motion;
+        }
+
+        @include jkl.forced-colors-mode {
+            outline: revert;
+            border: 1px solid ButtonText;
+        }
+    }
+
+    &__text {
+        display: inline-block;
+        margin: var(--jkl-radio-button-text-margin);
+        transform: var(--jkl-radio-button-text-transform);
+    }
+
+    &--error {
+        --background-color: var(--jkl-color-background-alert-error);
+    }
+
+    &--inline {
+        display: inline-flex;
+        margin-top: unset;
+        margin-right: jkl.$spacing-l;
+    }
+
+    + .jkl-form-support-label {
+        margin-left: calc(var(--jkl-radio-button-size) + #{jkl.$spacing-8});
+        margin-top: jkl.rem(-6px);
+        margin-bottom: jkl.$spacing-8;
+    }
+}

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

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