@oslokommune/punkt-css 12.2.0 → 12.3.0

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

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

package/dist/scss/base/_typography.scss

@@ -44,6 +44,11 @@ a,
   word-wrap: break-word;
   cursor: pointer;
 
+  span {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
   // visited
   &:visited:not(.pkt-linkcard):not(.pkt-btn):not(.pkt-tabs__link) {
     color: inherit;
@@ -59,7 +64,8 @@ a,
   // focus
   &:focus-visible,
   &.pkt-link--focus {
-    box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-text-action-active),
+    box-shadow:
+      0px 0px 0px 0.125rem var(--pkt-color-text-action-active),
       0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
     outline: none;
     color: var(--pkt-color-text-action-active);
@@ -81,26 +87,33 @@ a,
 .pkt-link {
   display: inline;
   text-align: left;
-  align-items: center;
+  align-items: baseline;
+}
 
+.pkt-link {
   &__icon {
     --fg-color: currentColor;
     width: 1.5rem;
     height: 1.5rem;
     flex-shrink: 0;
-    margin-right: 0.5rem;
+    margin-right: 0.25rem;
+    margin-left: 0.25rem;
+    align-self: center;
   }
 
-  &--icon-left {
+  &--icon-left,
+  &--icon-right {
     display: inline-flex;
-    flex-direction: row;
     text-decoration: none;
+    align-items: baseline;
+  }
+
+  &--icon-left {
+    flex-direction: row;
   }
 
   &--icon-right {
-    display: inline-flex;
     flex-direction: row-reverse;
-    text-decoration: none;
   }
 
   &--external::after {
@@ -113,9 +126,11 @@ a,
     width: 1.125rem;
     height: 1.125rem;
     vertical-align: middle;
+    align-self: center;
   }
 
-  &--external:hover::after {
+  &--external:hover::after,
+  &:hover pkt-icon {
     // #1f42aa
     filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%)
       contrast(90%);
@@ -194,3 +209,11 @@ button.pkt-link {
 .pkt-truncate-text {
   @include typography.truncate-text();
 }
+
+/*
+ * Display contents and disregard layout
+ */
+.pkt-display-contents,
+.pkt-contents {
+  display: contents;
+}

package/dist/scss/components/_calendar.scss

@@ -4,7 +4,10 @@
 @use '../abstracts/mixins/typography';
 
 .pkt-calendar,
-pkt-el-calendar {
+pkt-calendar {
+  z-index: 2;
+  display: block;
+  position: relative;
   max-width: 25rem;
   .pkt-cal-month-nav {
     display: flex;
@@ -28,46 +31,42 @@ pkt-el-calendar {
 
   .pkt-cal-month-nav,
   .pkt-cal-days {
+    td {
+      border: 0;
+    }
     .pkt-btn,
-    li {
+    td > div {
       font: inherit;
       aspect-ratio: 1 / 1;
       display: flex;
       justify-content: center;
       align-items: center;
+      border: 0;
     }
     .pkt-btn {
-      margin: 1px;
-      z-index: 1;
+      margin: 0;
       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 {
+    border-spacing: 0;
+    td {
+      padding: 0;
+    }
+    div {
       aspect-ratio: 1 / 1;
       justify-content: center;
       align-items: center;
       position: relative;
       text-align: center;
-      z-index: 1;
       &:before,
       &:after {
         content: '';
@@ -75,7 +74,7 @@ pkt-el-calendar {
         position: absolute;
         top: 0;
         bottom: 0;
-        z-index: 0;
+        z-index: -1;
       }
       &:before {
         left: 0;
@@ -92,7 +91,9 @@ pkt-el-calendar {
     grid-template-columns: repeat(8, 12.5%);
   }
 
-  .pkt-cal-other {
+  .pkt-cal-other,
+  .pkt-cal-days [data-disabled] {
+    cursor: not-allowed;
     color: var(--pkt-color-grays-gray-200);
     .pkt-btn {
       color: inherit;
@@ -102,34 +103,32 @@ pkt-el-calendar {
   }
   .pkt-cal-today {
     .pkt-btn {
-      z-index: 2;
       text-decoration: underline;
       outline: 1px solid var(--pkt-color-border-default);
+      outline-offset: -1px;
     }
   }
   .pkt-cal-selected {
     .pkt-btn,
-    .pkt-btn:focus {
+    .pkt-btn:focus,
+    .pkt-btn:hover {
       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 {
+    :before,
+    :after,
+    &-first :after,
+    &-last :before {
       background-color: var(--pkt-color-surface-default-light-blue);
     }
-    &-first:before,
-    &-last:after {
+    &-first :before,
+    &-last :after {
       background-color: transparent;
     }
   }
   .pkt-cal-range-hover {
-    &:before,
+    :before,
     .pkt-btn {
       background-color: var(--pkt-color-surface-default-light-blue);
     }
@@ -139,9 +138,39 @@ pkt-el-calendar {
   }
   .pkt-cal-excluded {
     background-color: var(--pkt-color-brand-neutrals-100);
-    &:before,
-    &:after {
+    :before,
+    :after {
       background-color: transparent;
     }
   }
 }
+
+pkt-datepicker {
+  display: block;
+  position: relative;
+  .pkt-datepicker {
+    position: relative;
+    &__tags {
+      .pkt-tag {
+        margin: 0 0.25rem 0.5rem 0;
+      }
+    }
+  }
+}
+.pkt-datepicker__inputs {
+  width: 100%;
+  position: relative;
+}
+.pkt-calendar-popup {
+  top: 100%;
+  left: 0;
+  z-index: 2;
+  margin: 0;
+  padding: 0.5rem;
+  position: absolute;
+  width: max-content;
+  background: var(--pkt-color-background-default);
+  box-shadow:
+    0px 2px 4px -2px rgba(0, 0, 0, 0.1),
+    0px 4px 6px -1px rgba(0, 0, 0, 0.1);
+}

package/dist/scss/components/_card.scss

@@ -0,0 +1,92 @@
+/*
+ * Cardcomponent
+ */
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/' as *;
+
+.pkt-card {
+  padding: map.get(variables.$spacing, 'size-32');
+  display: flex;
+  gap: 3rem;
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  &__tags {
+    display: flex;
+    gap: 1rem;
+  }
+
+  // DIRECTION
+  &--landscape {
+    flex-direction: row;
+    max-width: 950px;
+
+    .pkt-card__image {
+      min-width: 320px;
+      overflow: hidden;
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        object-position: center;
+      }
+    }
+  }
+
+  &--portrait {
+    flex-direction: column;
+    max-width: 500px;
+
+    .pkt-card__image {
+      max-height: 400px;
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+      }
+    }
+  }
+
+  // SKINS
+
+  &--outlined {
+    border: 3px solid var(--pkt-color-grays-gray-100);
+    background-color: var(--pkt-color-background-default);
+  }
+
+  &--gray {
+    background-color: var(--pkt-color-background-subtle);
+  }
+
+  &--blue {
+    background-color: var(--pkt-color-brand-blue-300);
+  }
+
+  &--green {
+    background-color: var(--pkt-color-brand-light-green-400);
+  }
+
+  &--beige {
+    background-color: var(--pkt-color-brand-light-beige-1000);
+  }
+
+  // Removes auto paddings and margins that comes with these elements so that we can control
+  // the gaps  between each elements ourseles
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  p {
+    padding: 0;
+    margin: 0;
+  }
+}

package/dist/scss/components/_icon.scss

@@ -8,7 +8,7 @@
 @use '../abstracts/variables';
 
 .pkt-icon,
-pkt-el-icon {
+pkt-icon {
   display: inline-flex;
   min-height: 1rem;
   min-width: 1rem;
@@ -19,7 +19,9 @@ pkt-el-icon {
     max-height: 100%;
     max-width: 100%;
   }
+}
 
+.pkt-icon {
   &--small {
     height: 1rem;
     width: 1rem;

package/dist/scss/components/_index.scss

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

package/dist/scss/components/_preview.scss

@@ -72,3 +72,7 @@
 .astro-code.github-light {
   background-color: var(--pkt-color-surface-default-gray) !important;
 }
+
+.preview-content {
+  display: contents;
+}

package/dist/scss/components/_tabs.scss

@@ -37,7 +37,7 @@
     @include typography.get-text('pkt-txt-16');
     white-space: nowrap;
     .pkt-icon,
-    pkt-el-icon {
+    pkt-icon {
       --fg-color: currentColor;
     }
     &,

package/dist/scss/elements/_button.scss

@@ -158,7 +158,7 @@ $-skins: (
   ),
 );
 
-.pkt-btn__icon > svg {
+.pkt-btn__icon svg {
   --ring-color: var(--pkt-color-brand-dark-blue-700);
   --spinner-color: var(--pkt-color-brand-blue-1000);
 
@@ -184,7 +184,8 @@ $-skins: (
     line-height: map.get($o, 'line-height');
     padding: map.get($o, 'padding');
 
-    &__icon {
+    &__icon,
+    &__icon .pkt-icon {
       height: map.get($o, 'icon-size');
       margin: map.get($o, 'icon-margin');
       width: map.get($o, 'icon-size');
@@ -224,7 +225,8 @@ $-skins: (
       padding: map.get($o, 'padding');
     }
 
-    &--#{$name} &__icon {
+    &--#{$name} &__icon,
+    &--#{$name} &__icon .pkt-icon {
       height: map.get($o, 'icon-size');
       margin: map.get($o, 'icon-margin');
       width: map.get($o, 'icon-size');
@@ -373,6 +375,7 @@ $-skins: (
   }
 
   @at-root a.#{$-module-name}:focus,
+    div.#{$-module-name}:not([data-disabled]):focus,
     &:enabled:focus,
     &.#{$-module-name}--focus {
     background-color: var(--pkt-color-button-background-focus);
@@ -383,6 +386,7 @@ $-skins: (
   }
 
   @at-root a.#{$-module-name}:hover,
+    div.#{$-module-name}:not([data-disabled]):hover,
     &:enabled:hover,
     &.#{$-module-name}--hover {
     background-color: var(--pkt-color-button-background-hover);
@@ -393,6 +397,7 @@ $-skins: (
   }
 
   @at-root a.#{$-module-name}:active,
+    div.#{$-module-name}:not([data-disabled]):active,
     &:enabled:active,
     &.#{$-module-name}--active,
     &.#{$-module-name}--active:hover {
@@ -403,7 +408,9 @@ $-skins: (
     text-decoration: none;
   }
 
-  &:disabled {
+  &:disabled,
+  &[disabled],
+  &[data-disabled] {
     background-color: var(--pkt-color-button-background-disabled);
     border-color: var(--pkt-color-button-border-disabled);
     color: var(--pkt-color-button-text-disabled);

package/dist/scss/elements/_input.scss

@@ -55,6 +55,10 @@
   margin: 0;
   padding: 0.5rem 1rem;
 
+  &:not(&-compact) {
+    min-height: 3rem;
+  }
+
   &-compact#{&} {
     border: 0;
     border-bottom: 1px solid var(--pkt-color-input-border-normal);
@@ -93,7 +97,9 @@
       background-image: var(--svg);
       background-repeat: no-repeat;
       background-position: right 0.7rem top 50%;
-      background-size: 1.5rem auto, 100%;
+      background-size:
+        1.5rem auto,
+        100%;
     }
 
     option {
@@ -270,4 +276,26 @@
       color: var(--pkt-color-input-text-error);
     }
   }
+
+  &__range-inputs {
+    container: range / inline-size;
+  }
+}
+@container range (width < 30rem) {
+  .pkt-input__container {
+    border: 2px solid var(--pkt-color-input-border-normal);
+    display: grid;
+    grid-template-rows: auto auto;
+    grid-template-columns: min-content auto 4rem;
+    gap: 0;
+    > :nth-child(2) {
+      grid-column-start: span 2;
+    }
+    .pkt-input-prefix,
+    .pkt-input-suffix,
+    .pkt-input-icon,
+    .pkt-input {
+      border: 0;
+    }
+  }
 }

package/dist/scss/normalise/_index.scss

@@ -202,6 +202,30 @@ textarea {
   height: auto;
 }
 
+/**
+  * Remove the default appearance of date and time inputs
+  */
+
+input[type='date'],
+input[type='time'],
+input[type='datetime-local'],
+input[type='month'] {
+  -webkit-appearance: textfield;
+}
+
+input::-webkit-datetime-edit {
+  margin-bottom: -4px;
+}
+
+/**
+  * Remove the calendar icon in date inputs
+  */
+input[type='date']::-webkit-inner-spin-button,
+input[type='date']::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
 /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "12.2.0",
+  "version": "12.3.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -54,5 +54,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "6eb4f246d43111da9142a7c98526d2d5d7dfda4e"
+  "gitHead": "464d3d6b9981108d7a53912cb58e14fc73c9be10"
 }