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

package/dist/scss/components/_accordion.scss

@@ -7,25 +7,52 @@
 @use '../abstracts/mixins/breakpoints' as *;
 @use '../abstracts/' as *;
 
-.pkt-accordion {
+@mixin pkt-accordion-item-standard-title {
+  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');
+}
+
+@mixin pkt-accordion-item-standard-content {
+  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');
+}
+
+@mixin pkt-accordion-item-compact-title {
+  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');
+  padding: map.get(variables.$spacing, 'size-16');
+}
+
+@mixin pkt-accordion-item-compact-content {
+  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');
+}
+
+.pkt-accordion,
+pkt-accordion::part(container) {
   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 {
+// Skin variations for default accordion
+.pkt-accordion--borderless,
+pkt-accordion[skin='borderless'] {
   .pkt-accordion-item {
     border: none;
 
@@ -37,36 +64,43 @@
   }
 }
 
-.pkt-accordion--outlined {
+.pkt-accordion--outlined,
+pkt-accordion[skin='outlined'] {
   .pkt-accordion-item {
     border: 2px solid var(--pkt-color-border-subtle);
   }
 }
 
-.pkt-accordion--beige {
+pkt-accordion[skin='beige']::part(container),
+pkt-accordion[skin='blue']::part(container) {
   row-gap: 0;
+}
 
-  .pkt-accordion-item {
-    &:nth-child(odd) {
-      background-color: var(--pkt-color-surface-default-light-beige);
-    }
+.pkt-accordion--beige,
+pkt-accordion[skin='beige'] {
+  row-gap: 0;
+  > .pkt-accordion-item:nth-of-type(odd),
+  > pkt-accordion-item:nth-of-type(odd) .pkt-accordion-item {
+    background-color: var(--pkt-color-surface-default-light-beige);
   }
 }
 
-.pkt-accordion--blue {
+.pkt-accordion--blue,
+pkt-accordion[skin='blue'] {
   row-gap: 0;
 
-  .pkt-accordion-item {
-    &:nth-child(odd) {
-      background-color: var(--pkt-color-surface-default-light-blue);
-    }
+  > .pkt-accordion-item:nth-of-type(odd),
+  > pkt-accordion-item:nth-of-type(odd) .pkt-accordion-item {
+    background-color: var(--pkt-color-surface-default-light-blue);
   }
 }
 
 // COMPACT
 
-.pkt-accordion--compact.pkt-accordion--borderless {
-  .pkt-accordion-item {
+.pkt-accordion--compact.pkt-accordion--borderless,
+pkt-accordion[compact][skin='borderless'] {
+  .pkt-accordion-item,
+  .pkt-accordion-item--compact.pkt-accordion-item--borderless {
     border: none;
 
     &--open {
@@ -76,26 +110,20 @@
     }
   }
 }
-.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');
+// Set compact styles when using accordion component as wrapper and standalone accordion item
+.pkt-accordion--compact,
+pkt-accordion[compact] {
+  > .pkt-accordion-item,
+  > pkt-accordion-item > .pkt-accordion-item {
+    .pkt-accordion-item__title {
+      @include pkt-accordion-item-compact-title;
+    }
+    .pkt-accordion-item__content {
+      @include pkt-accordion-item-compact-content;
     }
   }
 }
-
 // Accordion item
 .pkt-accordion-item {
   color: var(--pkt-color-brand-dark-blue-1000);
@@ -109,6 +137,7 @@
   }
 
   &__title {
+    @include pkt-accordion-item-standard-title;
     align-items: center;
     cursor: pointer;
     display: flex;
@@ -133,33 +162,66 @@
   }
 
   &__content {
+    @include pkt-accordion-item-standard-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);
+  // Skin variations for single accordion item (standalone)
+  &--borderless,
+  pkt-accordion-item[skin='borderless'] {
+    border: none;
+
+    &[open] {
+      .pkt-accordion-item__title {
+        box-shadow: inset 0 0 0 0.25rem var(--pkt-color-border-states-active);
       }
     }
   }
 
+  &--outlined,
+  pkt-accordion-item[skin='outlined'] {
+    border: 2px solid var(--pkt-color-border-subtle);
+  }
+
+  &--beige,
+  pkt-accordion-item[skin='beige'] {
+    background-color: var(--pkt-color-surface-default-light-beige);
+  }
+
+  &--blue,
+  pkt-accordion-item[skin='blue'] {
+    background-color: var(--pkt-color-surface-default-light-blue);
+  }
+}
+
+.pkt-accordion-item--compact {
+  .pkt-accordion-item__title {
+    @include pkt-accordion-item-compact-title;
+  }
   .pkt-accordion-item__content {
-    display: block;
+    @include pkt-accordion-item-compact-content;
   }
+}
+// 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__icon {
-    transform: rotate(180deg) translateY(0);
+    &__content {
+      display: block;
+    }
+
+    &__icon {
+      transform: rotate(180deg) translateY(0);
+    }
   }
 }
 

package/dist/scss/components/_alert.scss

@@ -9,7 +9,9 @@
 $-module-name: 'pkt-alert';
 
 // Spacing
-$-alert-spacing: map.get(variables.$spacing, 'size-24');
+$-spacing-12: map.get(variables.$spacing, 'size-12');
+$-spacing-16: map.get(variables.$spacing, 'size-16');
+$-spacing-24: map.get(variables.$spacing, 'size-24');
 $-border-thickness: map.get(variables.$spacing, 'size-4');
 
 // default is "info"
@@ -46,25 +48,38 @@ pkt-alert {
   display: block;
 }
 
+.pkt-alert__grid {
+  display: grid;
+  grid-template-areas:
+    'icon title close'
+    'content content content'
+    'date date date';
+  grid-template-columns: min-content auto min-content;
+  grid-row-gap: $-spacing-16;
+  grid-column-gap: $-spacing-24;
+  justify-items: left;
+  align-items: center;
+}
+
 .pkt-alert {
-  padding: $-alert-spacing $-alert-spacing $-alert-spacing calc($-alert-spacing - $-border-thickness);
-  display: block;
-  position: relative;
   border-left: $-border-thickness solid var(--pkt-color-alert-bc);
   background-color: var(--pkt-color-alert-bg);
   color: var(--pkt-color-alert-txt);
+  padding: $-spacing-16 $-spacing-24;
+
+  display: block;
 
   &__title {
-    margin: 0 0 $-alert-spacing 2.5rem;
+    grid-area: title;
     @include get-text('pkt-txt-18-medium');
   }
 
   &__close ~ &__title {
-    margin: 0 4rem $-alert-spacing 2.5rem;
+    margin: 0 4rem $-spacing-24 2.5rem;
   }
 
   &__text {
-    margin: 0 0 0 2.5rem;
+    grid-area: content;
     overflow-wrap: break-word;
 
     @include get-text('pkt-txt-18-light');
@@ -82,18 +97,8 @@ pkt-alert {
     }
   }
 
-  &__close + &__text {
-    margin: 0 4rem 0 2.5rem;
-  }
-
-  &__title + &__text {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
   &__date {
-    margin-top: $-alert-spacing;
-
+    grid-area: date;
     @include get-text('pkt-txt-14-light');
   }
 
@@ -101,15 +106,11 @@ pkt-alert {
     --fg-color: var(--pkt-color-alert-icon-fg);
     height: 2rem;
     width: 2rem;
-    position: absolute;
-    top: 22px;
-    left: 20px;
+    grid-area: icon;
   }
 
   &__close {
-    position: absolute;
-    right: 1.125rem;
-    top: 0.625rem;
+    grid-area: close;
 
     & svg {
       --fg-color: var(--pkt-color-alert-close-fg);
@@ -118,21 +119,14 @@ pkt-alert {
 }
 
 .pkt-alert--compact {
-  padding: map.get(variables.$spacing, 'size-12') map.get(variables.$spacing, 'size-16')
-    map.get(variables.$spacing, 'size-12') map.get(variables.$spacing, 'size-4');
+  padding: $-spacing-12 $-spacing-16;
 
   .pkt-alert__icon {
     width: 1.375rem;
     height: 1.375rem;
-    top: 0.81rem;
-    left: 1.25rem;
   }
 
   .pkt-alert__text {
     @include get-text('pkt-txt-16-light');
-    margin: 0 2.875rem;
-  }
-  .pkt-alert__close {
-    top: 0.25rem;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "12.33.0",
+  "version": "12.34.1",
   "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": "892989f59c2dd0af07cb234344ffdd828a652c7c"
+  "gitHead": "62e323745bcb2f3d3a27ff2f05090680fbeaeef7"
 }