@fremtind/jokul 0.8.1 → 0.10.0

package/src/components/cookie-consent/styles/cookie-consent.css

@@ -0,0 +1,94 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+.jkl-cookie-consent-modal {
+  position: fixed;
+  z-index: 9000 !important;
+}
+.jkl-cookie-consent-modal[aria-hidden=true] {
+  display: none;
+}
+.jkl-cookie-consent-modal > .jkl-cookie-consent-modal__overlay {
+  position: fixed;
+  background: rgba(0, 0, 0, 0.3);
+  inset: 0;
+  transition: 0.2s;
+}
+.jkl-cookie-consent-modal__content {
+  z-index: 10000 !important;
+  position: fixed;
+  margin: auto;
+  top: 10%;
+  max-height: 80vh;
+  overflow-y: auto;
+  box-sizing: border-box;
+  left: 0;
+  right: 0;
+  width: 100%;
+  padding: 2.5rem 2.5rem 1.875rem 2.5rem;
+  min-width: 20rem;
+  max-width: 41.25rem;
+  background-color: var(--jkl-background-color);
+  box-shadow: 0.25rem 0.375rem 1rem rgba(0, 0, 0, 0.15);
+  transition: 0.2s;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+}
+@media (min-width: 680px) {
+  .jkl-cookie-consent-modal__content {
+    font-size: 1.25rem;
+    line-height: 2rem;
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+}
+@media (width >= 0) and (max-width: 679px) {
+  .jkl-cookie-consent-modal__content {
+    top: 2.5rem;
+    margin: 1.5rem;
+    max-width: calc(100% - 1.5rem - 1.5rem);
+    padding: 1.5rem;
+  }
+}
+@media screen and (forced-colors: active) {
+  .jkl-cookie-consent-modal__content {
+    border: 2px solid CanvasText;
+  }
+}
+.jkl-cookie-consent-modal__checklist {
+  margin-bottom: 1rem;
+}
+.jkl-cookie-consent-modal__info-text {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+}
+.jkl-cookie-consent-modal__header {
+  margin-bottom: 1.5rem;
+  font-size: 1.3125rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+  --jkl-icon-weight: 500;
+}
+@media (min-width: 680px) {
+  .jkl-cookie-consent-modal__header {
+    font-size: 1.5625rem;
+    line-height: 2rem;
+    font-weight: 700;
+    --jkl-icon-weight: 500;
+  }
+}
+.jkl-cookie-consent-modal__checkbox {
+  margin-bottom: 0.5rem;
+  margin-top: 1.5rem;
+}
+.jkl-cookie-consent-modal__button-group {
+  margin-top: 2.5rem;
+}
+.jkl-cookie-consent-modal__button-group > :not(:first-child) {
+  margin-left: 1.5rem;
+}

package/src/components/cookie-consent/styles/cookie-consent.min.css

@@ -0,0 +1 @@
+.jkl-cookie-consent-modal{position:fixed;z-index:9000!important}.jkl-cookie-consent-modal[aria-hidden=true]{display:none}.jkl-cookie-consent-modal>.jkl-cookie-consent-modal__overlay{background:#0000004d;inset:0;position:fixed;transition:.2s}.jkl-cookie-consent-modal__content{--jkl-icon-weight:300;background-color:var(--jkl-background-color);box-shadow:.25rem .375rem 1rem #00000026;box-sizing:border-box;font-size:1.125rem;font-weight:400;left:0;line-height:1.75rem;margin:auto;max-height:80vh;max-width:41.25rem;min-width:20rem;overflow-y:auto;padding:2.5rem 2.5rem 1.875rem;position:fixed;right:0;top:10%;transition:.2s;width:100%;z-index:10000!important}@media (min-width:680px){.jkl-cookie-consent-modal__content{--jkl-icon-weight:300;font-size:1.25rem;font-weight:400;line-height:2rem}}@media (width >= 0) and (max-width:679px){.jkl-cookie-consent-modal__content{margin:1.5rem;max-width:calc(100% - 3rem);padding:1.5rem;top:2.5rem}}@media screen and (forced-colors:active){.jkl-cookie-consent-modal__content{border:2px solid CanvasText}}.jkl-cookie-consent-modal__checklist{margin-bottom:1rem}.jkl-cookie-consent-modal__info-text{--jkl-icon-weight:300;font-size:1rem;font-weight:400;line-height:1.5rem}.jkl-cookie-consent-modal__header{--jkl-icon-weight:500;font-size:1.3125rem;font-weight:700;line-height:1.75rem;margin-bottom:1.5rem}@media (min-width:680px){.jkl-cookie-consent-modal__header{--jkl-icon-weight:500;font-size:1.5625rem;font-weight:700;line-height:2rem}}.jkl-cookie-consent-modal__checkbox{margin-bottom:.5rem;margin-top:1.5rem}.jkl-cookie-consent-modal__button-group{margin-top:2.5rem}.jkl-cookie-consent-modal__button-group>:not(:first-child){margin-left:1.5rem}

package/src/components/cookie-consent/styles/cookie-consent.scss

@@ -0,0 +1,79 @@
+@charset "UTF-8";
+@use "../../../core/jkl";
+
+$_card-corner-radius: jkl.rem(2px);
+$_container-width: jkl.rem(660px);
+$_container-width--compact: jkl.rem(320px);
+
+.jkl-cookie-consent-modal {
+    position: fixed;
+    z-index: jkl.$z-index--modal !important;
+
+    &[aria-hidden="true"] {
+        display: none;
+    }
+
+    & > .jkl-cookie-consent-modal__overlay {
+        position: fixed;
+        background: rgb(0 0 0 / 30%);
+        inset: 0;
+        transition: 0.2s;
+    }
+
+    &__content {
+        z-index: jkl.$z-index--floating !important;
+        position: fixed;
+        margin: auto;
+        top: 10%;
+        max-height: 80vh;
+        overflow-y: auto;
+        box-sizing: border-box;
+        left: 0;
+        right: 0;
+        width: 100%;
+        padding: jkl.$spacing-40 jkl.$spacing-40 jkl.rem(30px) jkl.$spacing-40;
+        min-width: $_container-width--compact;
+        max-width: $_container-width;
+        background-color: var(--jkl-background-color);
+        box-shadow: jkl.$drop-shadow--large;
+        transition: 0.2s;
+        @include jkl.text-style("body");
+
+        @include jkl.small-device {
+            top: jkl.$spacing-40;
+            margin: jkl.$spacing-24;
+            max-width: calc(100% - #{jkl.$spacing-24} - #{jkl.$spacing-24});
+            padding: jkl.$spacing-24;
+        }
+
+        @include jkl.forced-colors-mode {
+            border: 2px solid CanvasText;
+        }
+    }
+
+    &__checklist {
+        margin-bottom: jkl.$spacing-16;
+    }
+
+    &__info-text {
+        @include jkl.text-style("small");
+    }
+
+    &__header {
+        margin-bottom: jkl.$spacing-24;
+        @include jkl.text-style("heading-3");
+    }
+
+    &__checkbox {
+        margin-bottom: jkl.$spacing-8;
+        margin-top: jkl.$spacing-24;
+    }
+
+    &__button-group {
+        margin-top: jkl.$spacing-40;
+
+        & > :not(:first-child) {
+            margin-left: jkl.$spacing-24;
+        }
+    }
+}

package/src/components/datepicker/styles/_calendar-date-button.scss

@@ -0,0 +1,100 @@
+@use "../../../core/jkl";
+
+@include jkl.light-mode-variables {
+    --jkl-calendar-adjacent-month-color: #{jkl.$color-stein};
+    --jkl-calendar-disabled-day-color: #{jkl.$color-svaberg};
+    --jkl-calendar-active-day-color: #{jkl.$color-hvit};
+    --jkl-calendar-hover-date-background-color: #{jkl.$color-dis};
+    --jkl-calendar-selected-date-background-color: #{jkl.$color-granitt};
+}
+
+@include jkl.dark-mode-variables {
+    --jkl-calendar-adjacent-month-color: #{jkl.$color-svaberg};
+    --jkl-calendar-disabled-day-color: #{jkl.$color-stein};
+    --jkl-calendar-active-day-color: #{jkl.$color-svart};
+    --jkl-calendar-hover-date-background-color: #{jkl.$color-stein};
+    --jkl-calendar-selected-date-background-color: #{jkl.$color-snohvit};
+}
+
+@include jkl.comfortable-density-variables {
+    --jkl-calendar-date-size: #{jkl.rem(38px)};
+    @include jkl.declare-font-variables("jkl-calendar-date", "body");
+
+    @include jkl.small-device {
+        --jkl-calendar-date-size: #{jkl.rem(36px)};
+        @include jkl.declare-font-variables("jkl-calendar-date", "small");
+    }
+
+    // Custom tweaks for iPhone SE
+    @include jkl.screen-to(375px) {
+        --jkl-calendar-date-size: #{jkl.rem(32px)};
+    }
+}
+
+@include jkl.compact-density-variables {
+    --jkl-calendar-date-size: #{jkl.rem(32px)};
+    @include jkl.declare-font-variables("jkl-calendar-date", "small");
+}
+
+.jkl-calendar-date-button {
+    @include jkl.use-font-variables("jkl-calendar-date");
+    appearance: none;
+    position: relative;
+
+    box-sizing: border-box;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    height: var(--jkl-calendar-date-size);
+    width: var(--jkl-calendar-date-size);
+    border-radius: 50%;
+    background-color: transparent;
+    color: var(--jkl-calendar-text-color);
+
+    margin: var(--jkl-calendar-date-margin);
+
+    padding: 0;
+    padding-top: jkl.$spacing-2; // adjust visual alignment of text
+    @include jkl.motion("entrance", "energetic");
+    transition-property: color, background-color, box-shadow;
+
+    @include jkl.reset-outline;
+
+    &[data-adjacent="true"] {
+        @include jkl.text-style("small");
+        padding: 0; // reset vertical alignment of text
+        color: var(--jkl-calendar-adjacent-month-color);
+    }
+
+    &[aria-current="date"] {
+        font-weight: jkl.$typography-weight-bold;
+    }
+
+    // Other dates
+    &:hover:not(:disabled) {
+        background-color: var(--jkl-calendar-hover-date-background-color);
+        cursor: pointer;
+    }
+
+    // Selected date
+    &[aria-pressed="true"] {
+        background-color: var(--jkl-calendar-selected-date-background-color);
+        color: var(--jkl-calendar-active-day-color);
+        cursor: pointer;
+
+        &:hover {
+            color: var(--jkl-calendar-text-color);
+        }
+    }
+
+    &:disabled {
+        color: var(--jkl-calendar-disabled-day-color);
+    }
+
+    @include jkl.keyboard-navigation {
+        &:focus {
+            outline: jkl.rem(2px) solid var(--jkl-calendar-focus-color);
+            outline-offset: jkl.rem(2px);
+        }
+    }
+}

package/src/components/datepicker/styles/_calendar-navigation-dropdown.scss

@@ -0,0 +1,53 @@
+@use "../../../core/jkl";
+
+.jkl-calendar-navigation-dropdown {
+    // Størrelsen til medium ikon
+    --chevron-size: #{jkl.rem(24px)};
+
+    display: inline-flex;
+    align-items: center;
+
+    & > * {
+        cursor: pointer;
+    }
+
+    &__select {
+        appearance: none;
+        @include jkl.text-style("small") {
+            font-weight: jkl.$typography-weight-bold;
+        }
+        background-color: transparent;
+        color: inherit;
+        border-radius: 0;
+        border: none;
+        text-align: end;
+        text-align-last: end;
+        height: jkl.rem(40px);
+        margin: 0;
+        padding: 0;
+        padding-inline-end: var(--chevron-size);
+
+        @include jkl.reset-outline;
+
+        & option {
+            color: var(--jkl-select-text-color);
+            background-color: var(--jkl-select-open-background-color);
+        }
+
+        @include jkl.keyboard-navigation {
+            &:focus {
+                outline: jkl.rem(2px) solid var(--jkl-calendar-focus-color);
+                outline-offset: 1px;
+            }
+        }
+    }
+
+    &__chevron {
+        margin-left: calc(var(--chevron-size) * -1);
+        pointer-events: none;
+    }
+
+    & + & {
+        margin-inline-start: var(--jkl-spacing-8);
+    }
+}

package/src/components/datepicker/styles/_calendar-navigation.scss

@@ -0,0 +1,54 @@
+@use "../../../core/jkl";
+
+@include jkl.light-mode-variables {
+    --jkl-calendar-disabled-day-color: #{jkl.$color-svaberg};
+    --jkl-calendar-navigation-arrow-focus-color: #{jkl.$color-stein};
+}
+
+@include jkl.dark-mode-variables {
+    --jkl-calendar-disabled-day-color: #{jkl.$color-stein};
+    --jkl-calendar-navigation-arrow-focus-color: #{jkl.$color-svaberg};
+}
+
+.jkl-calendar-navigation {
+    border: 0;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+
+    &__arrow {
+        display: inline-flex;
+        position: relative;
+        cursor: pointer;
+        padding: 0;
+        margin: 0;
+        margin-left: jkl.rem(-8px);
+        justify-content: center;
+        align-items: center;
+        background-color: transparent;
+        color: var(--jkl-calendar-text-color);
+        width: jkl.rem(40px);
+        height: jkl.rem(40px);
+
+        @include jkl.reset-outline;
+
+        &:hover {
+            color: var(--jkl-calendar-navigation-arrow-focus-color);
+        }
+
+        @include jkl.keyboard-navigation {
+            &:focus {
+                outline: jkl.rem(2px) solid var(--jkl-calendar-focus-color);
+                outline-offset: jkl.rem(-2px);
+            }
+        }
+
+        &:disabled {
+            color: var(--jkl-calendar-disabled-day-color);
+        }
+    }
+}

package/src/components/datepicker/styles/_calendar-table.scss

@@ -0,0 +1,27 @@
+@use "../../../core/jkl";
+
+.jkl-calendar-table {
+    // Calendar table heading (weekday names)
+    // ======================================
+
+    th {
+        @include jkl.text-style("small");
+        padding-bottom: var(--jkl-spacing-8);
+    }
+
+    // Calendar table styles
+    // =====================
+
+    td {
+        text-align: center;
+    }
+
+    td + td,
+    th + th {
+        padding-left: jkl.rem(4px); // space between columns
+    }
+
+    tr + tr > td {
+        padding-top: jkl.rem(4px); // space between rows
+    }
+}

package/src/components/datepicker/styles/_calendar.scss

@@ -0,0 +1,68 @@
+@use "../../../core/jkl";
+
+@include jkl.light-mode-variables {
+    --jkl-calendar-text-color: #{jkl.$color-granitt};
+    --jkl-calendar-background-color: #{jkl.$color-hvit};
+    --jkl-calendar-border-color: #{jkl.$color-granitt};
+    --jkl-calendar-focus-color: #{jkl.$color-granitt};
+}
+
+@include jkl.dark-mode-variables {
+    --jkl-calendar-text-color: #{jkl.$color-snohvit};
+    --jkl-calendar-background-color: #{jkl.$color-skifer};
+    --jkl-calendar-border-color: #{jkl.$color-snohvit};
+    --jkl-calendar-focus-color: #{jkl.$color-snohvit};
+}
+
+@include jkl.comfortable-density-variables {
+    --jkl-calendar-padding: var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-16);
+    --jkl-calendar-gap: var(--jkl-spacing-12);
+
+    // Custom tweaks for iPhone SE
+    @include jkl.screen-to(375px) {
+        --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8) var(--jkl-spacing-16);
+    }
+}
+
+@include jkl.compact-density-variables {
+    --jkl-calendar-padding: var(--jkl-spacing-4) var(--jkl-spacing-8) var(--jkl-spacing-16);
+    --jkl-calendar-gap: 0;
+}
+
+.jkl-calendar {
+    display: block;
+    background-color: var(--jkl-calendar-background-color);
+    color: var(--jkl-calendar-text-color);
+    border-radius: 3px;
+    box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-calendar-border-color),
+        0 0 0 jkl.rem(1px) var(--jkl-calendar-border-color), jkl.rem(2px) jkl.rem(4px) jkl.rem(16px) rgb(0 0 0 / 24%);
+
+    &--hidden {
+        display: none;
+    }
+
+    &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 5.75rem;
+        width: jkl.rem(12px);
+        height: jkl.rem(12px);
+        transform: translate(-50%, -50%) rotate(-45deg);
+        background-color: var(--jkl-calendar-background-color);
+        border-top: jkl.rem(2px) solid var(--jkl-calendar-border-color);
+        border-right: jkl.rem(2px) solid var(--jkl-calendar-border-color);
+    }
+
+    &__padding {
+        padding: var(--jkl-calendar-padding);
+        display: flex;
+        flex-direction: column;
+        gap: var(--jkl-calendar-gap);
+        box-sizing: border-box;
+
+        @include jkl.forced-colors-mode {
+            border: 1px solid CanvasText;
+        }
+    }
+}

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

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