@oslokommune/punkt-css 11.11.0 → 11.12.1

package/dist/scss/abstracts/variables/_index.scss

@@ -6,7 +6,7 @@
 @forward 'spacing';
 
 // Default icon path
-$icon-path: 'https://punkt-cdn.oslo.kommune.no/11.11/icons' !default;
+$icon-path: 'https://punkt-cdn.oslo.kommune.no/11.12/icons' !default;
 
 // Borders
 $border-width: (

package/dist/scss/components/_calendar.scss

@@ -0,0 +1,146 @@
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/functions';
+@use '../abstracts/mixins/typography';
+
+.pkt-calendar {
+  max-width: 25rem;
+  .pkt-cal-month-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    .pkt-cal-month-picker {
+      display: flex;
+      gap: 0.5rem;
+      .pkt-input {
+        @include typography.get-text('pkt-txt-16-medium');
+        &:is(select) {
+          text-align: right;
+        }
+      }
+      > .pkt-cal-input-year {
+        max-width: 4.5rem;
+      }
+    }
+  }
+
+  .pkt-cal-month-nav,
+  .pkt-cal-days {
+    .pkt-btn,
+    li {
+      font: inherit;
+      aspect-ratio: 1 / 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .pkt-btn {
+      margin: 1px;
+      z-index: 1;
+      border-radius: 50%;
+      &:focus,
+      &:active {
+        outline: 0;
+        border: 0;
+      }
+      &:disabled {
+        background-color: transparent;
+        border: 0;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .pkt-cal-days {
+    list-style: none;
+    display: grid;
+    grid-template-columns: repeat(7, 14.285%);
+    margin: 0;
+    padding-left: 0;
+    justify-content: center;
+    align-items: center;
+    > li {
+      aspect-ratio: 1 / 1;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      text-align: center;
+      z-index: 1;
+      &:before,
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        z-index: 0;
+      }
+      &:before {
+        left: 0;
+        right: 50%;
+      }
+      &:after {
+        left: 50%;
+        right: 0;
+      }
+    }
+  }
+  &.pkt-cal-weeknumbers .pkt-cal-day-names,
+  &.pkt-cal-weeknumbers .pkt-cal-days {
+    grid-template-columns: repeat(8, 12.5%);
+  }
+
+  .pkt-cal-other {
+    color: var(--pkt-color-grays-gray-200);
+    .pkt-btn {
+      color: inherit;
+      background: transparent;
+      border: none;
+    }
+  }
+  .pkt-cal-today {
+    .pkt-btn {
+      z-index: 2;
+      text-decoration: underline;
+      outline: 1px solid var(--pkt-color-border-default);
+    }
+  }
+  .pkt-cal-selected {
+    .pkt-btn,
+    .pkt-btn:focus {
+      background-color: var(--pkt-color-surface-strong-blue);
+      &:hover {
+        border-color: var(--pkt-color-surface-strong-blue);
+      }
+    }
+  }
+  .pkt-cal-in-range {
+    &:before,
+    &:after,
+    &-first:after,
+    &-last:before {
+      background-color: var(--pkt-color-surface-default-light-blue);
+    }
+    &-first:before,
+    &-last:after {
+      background-color: transparent;
+    }
+  }
+  .pkt-cal-range-hover {
+    &:before,
+    .pkt-btn {
+      background-color: var(--pkt-color-surface-default-light-blue);
+    }
+    .pkt-btn {
+      border-color: var(--pkt-color-surface-default-light-blue);
+    }
+  }
+  .pkt-cal-excluded {
+    background-color: var(--pkt-color-brand-neutrals-100);
+    &:before,
+    &:after {
+      background-color: transparent;
+    }
+  }
+}

package/dist/scss/components/_icon.scss

@@ -7,7 +7,8 @@
 @use 'sass:map';
 @use '../abstracts/variables';
 
-.pkt-icon {
+.pkt-icon,
+pkt-icon {
   display: inline-flex;
   min-height: 1rem;
   min-width: 1rem;

package/dist/scss/components/_index.scss

@@ -4,6 +4,7 @@
 @forward 'backlink';
 @forward 'badge';
 @forward 'breadcrumbs';
+@forward 'calendar';
 @forward 'footer';
 @forward 'header';
 @forward 'icon';

package/dist/scss/components/_linkcard.scss

@@ -34,7 +34,8 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
 
   &:hover .pkt-link--external {
     &::after {
-      filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%);
+      filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%)
+        contrast(90%);
     }
   }
 
@@ -42,7 +43,7 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
     @include get-text('pkt-txt-20-medium');
     margin-bottom: 0.5rem;
 
-    &>p {
+    & > p {
       margin: 0;
     }
 
@@ -59,7 +60,8 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
   }
 
   &.pkt-link {
-    .pkt-icon.pkt-link__icon {
+    .pkt-icon.pkt-link__icon,
+    pkt-icon.pkt-link__icon {
       margin-top: 0.188rem;
 
       @include bp('phablet-up') {
@@ -89,7 +91,6 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
     &:active {
       color: var(--pkt-color-brand-warm-blue-1000) !important;
     }
-
   }
 
   &--blue {
@@ -114,28 +115,30 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
 }
 
 @at-root [data-mode='dark'] .#{$-module-name} {
-
   .pkt-link--external::after {
     // white
-    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(2190%) hue-rotate(285deg) brightness(109%) contrast(100%);
+    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(2190%) hue-rotate(285deg) brightness(109%)
+      contrast(100%);
   }
 
   &:hover .pkt-link--external::after {
     // --pkt-color-brand-blue-500
-    filter: brightness(0) saturate(100%) invert(93%) sepia(91%) saturate(6664%) hue-rotate(169deg) brightness(103%) contrast(107%);
+    filter: brightness(0) saturate(100%) invert(93%) sepia(91%) saturate(6664%) hue-rotate(169deg) brightness(103%)
+      contrast(107%);
   }
 }
 
-
-@at-root [data-mode='dark'] .#{$-module-name}--beige, .#{$-module-name}--blue {
-
+@at-root [data-mode='dark'] .#{$-module-name}--beige,
+  .#{$-module-name}--blue {
   .pkt-link--external::after {
     // #2A2859
-    filter: brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) !important;
+    filter: brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%)
+      contrast(95%) !important;
   }
 
   .pkt-link--external:hover::after {
     // --pkt-color-brand-blue-500
-    filter: brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) !important;
+    filter: brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%)
+      contrast(95%) !important;
   }
 }

package/dist/scss/components/_tabs.scss

@@ -36,7 +36,8 @@
     border-bottom: 0.25rem solid transparent;
     @include typography.get-text('pkt-txt-16');
     white-space: nowrap;
-    .pkt-icon {
+    .pkt-icon,
+    pkt-icon {
       --fg-color: currentColor;
     }
     &,

package/dist/scss/elements/_input.scss

@@ -55,10 +55,19 @@
   margin: 0;
   padding: 0.5rem 1rem;
 
+  &-compact#{&} {
+    border: 0;
+    border-bottom: 1px solid var(--pkt-color-input-border-normal);
+    padding: 0 0 0.1rem 0;
+    @include typography.get-text('pkt-txt-16-light');
+    &:is(select):not([multiple]) {
+      background-position: right 0 top 50%;
+      padding-right: 2rem;
+    }
+  }
+
   &:not(textarea[cols]):not(input[size]):not(&--fullwidth),
-  &__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(
-      :is(:has(&--fullwidth))
-    ) {
+  &__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(&--fullwidth))) {
     width: min(100%, 31rem);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "11.11.0",
+  "version": "11.12.1",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "91201c4a7cd0684df65f421b9868bd02c22a2ecf"
+  "gitHead": "8546814ef0972d8aeb88791a57e2df10abe8a91a"
 }