@oslokommune/punkt-css 12.32.8 → 12.34.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.32/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/elements/_button.scss

@@ -359,6 +359,15 @@ $-skins: (
   appearance: none;
 
   // button sizes & variants
+
+  //hjelpeklasse for full bredde på liten skjerm
+  &--full-small {
+    @media screen and (max-width: 36rem) {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+    }
+  }
   @each $key, $value in $-sizes {
     @include -size($key, $value);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "12.32.8",
+  "version": "12.34.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": "2be6c93ef32da3656e4c88367201849e772d0017"
+  "gitHead": "4ab2b5b6508cf1749c9b1a66d92c6d214f737b26"
 }