@oslokommune/punkt-css 11.10.1 → 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.10/icons' !default;
+$icon-path: 'https://punkt-cdn.oslo.kommune.no/11.12/icons' !default;
 
 // Borders
 $border-width: (

package/dist/scss/components/_accordion.scss

@@ -0,0 +1,169 @@
+/*
+ * Accordion/Expandable component
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/' as *;
+
+.pkt-accordion {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 0fr;
+  row-gap: map.get(variables.$spacing, 'size-8');
+  transition: grid-template-rows 500ms;
+
+  font-size: map.get(variables.$font-size, 'size-24');
+  font-weight: map.get(variables.$font-weight, 'medium');
+  letter-spacing: map.get(variables.$letter-spacing, 'tight');
+  line-height: map.get(variables.$line-height, 'lh-36');
+
+  &:focus-visible {
+    border: 0.25rem solid var(--pkt-color-border-states-hover);
+  }
+}
+
+// Skin variations
+.pkt-accordion--borderless {
+  .pkt-accordion-item {
+    border: none;
+
+    &[open] {
+      .pkt-accordion-item__title {
+        box-shadow: inset 0 0 0 0.25rem var(--pkt-color-border-states-active);
+      }
+    }
+  }
+}
+
+.pkt-accordion--outlined {
+  .pkt-accordion-item {
+    border: 3px solid var(--pkt-color-border-gray);
+  }
+}
+
+.pkt-accordion--beige {
+  row-gap: 0;
+
+  .pkt-accordion-item {
+    &:nth-child(odd) {
+      background-color: var(--pkt-color-surface-default-light-beige);
+    }
+  }
+}
+
+.pkt-accordion--blue {
+  row-gap: 0;
+
+  .pkt-accordion-item {
+    &:nth-child(odd) {
+      background-color: var(--pkt-color-surface-default-light-blue);
+    }
+  }
+}
+
+// COMPACT
+
+.pkt-accordion--compact.pkt-accordion--borderless {
+  .pkt-accordion-item {
+    border: none;
+
+    &--open {
+      .pkt-accordion-item__title {
+        box-shadow: inset 0 0 0 0.125rem var(--pkt-color-border-states-active);
+      }
+    }
+  }
+}
+.pkt-accordion--compact > .pkt-accordion-item {
+  .pkt-accordion-item {
+    &__title {
+      padding: map.get(variables.$spacing, 'size-16');
+      font-size: map.get(variables.$font-size, 'size-16');
+      font-weight: map.get(variables.$font-weight, 'medium');
+      letter-spacing: map.get(variables.$letter-spacing, 'tight');
+      line-height: map.get(variables.$line-height, 'lh-24');
+    }
+
+    &__content {
+      padding: map.get(variables.$spacing, 'size-16');
+      font-size: map.get(variables.$font-size, 'size-16');
+      font-weight: map.get(variables.$font-weight, 'light');
+      letter-spacing: map.get(variables.$letter-spacing, 'tight');
+      line-height: map.get(variables.$line-height, 'lh-24');
+    }
+  }
+}
+
+// Accordion item
+.pkt-accordion-item {
+  color: var(--pkt-color-brand-dark-blue-1000);
+  background-color: var(--pkt-color-brand-neutrals-white);
+  transition: transform 0.3s;
+  appearance: none;
+  text-align: left;
+
+  summary::-webkit-details-marker {
+    display: none;
+  }
+
+  &__title {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    padding: map.get(variables.$spacing, 'size-24');
+
+    &:hover {
+      text-decoration: underline;
+
+      .pkt-accordion-item__icon {
+        transform: translateY(0.25rem);
+      }
+    }
+
+    &:focus-visible {
+      outline: 0.25rem solid var(--pkt-color-border-states-focus);
+    }
+  }
+
+  &__icon {
+    transition: transform 0.2s;
+  }
+
+  &__content {
+    border-top: none;
+    display: none;
+    font-size: map.get(variables.$font-size, 'size-18');
+    font-weight: map.get(variables.$font-weight, 'light');
+    letter-spacing: map.get(variables.$letter-spacing, 'tight');
+    line-height: map.get(variables.$line-height, 'lh-28');
+    padding: map.get(variables.$spacing, 'size-24');
+  }
+}
+
+// Accordion item when opened
+.pkt-accordion-item[open] {
+  .pkt-accordion-item__title {
+    border-bottom: none;
+    &:hover {
+      .pkt-accordion-item__icon {
+        transform: rotate(180deg) translateY(0.25rem);
+      }
+    }
+  }
+
+  .pkt-accordion-item__content {
+    display: block;
+  }
+
+  .pkt-accordion-item__icon {
+    transform: rotate(180deg) translateY(0);
+  }
+}
+
+.pkt-icon.pkt-accordion-item__icon > svg {
+  min-height: 2rem;
+  min-width: 2rem;
+}

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

@@ -1,8 +1,10 @@
+@forward 'accordion';
 @forward 'alert';
 @forward 'tag';
 @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.10.1",
+  "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": "2309609a0e76e913954fbf3f6042786e1fb5c2e1"
+  "gitHead": "8546814ef0972d8aeb88791a57e2df10abe8a91a"
 }