@oslokommune/punkt-css 17.1.0 → 17.1.1

package/dist/scss/components/_messagebox.scss

@@ -6,8 +6,6 @@
 @use '../abstracts/mixins/breakpoints' as *;
 @use '../abstracts/' as *;
 
-$-module-name: 'pkt-messagebox';
-
 pkt-messagebox {
   display: block;
 }
@@ -18,28 +16,28 @@ $-messagebox-spacing-compact: map.get(variables.$spacing, 'size-16');
 $-border-thickness: map.get(variables.$spacing, 'size-4');
 
 // default is "info"
-.#{$-module-name} {
+.pkt-messagebox {
   --pkt-color-messagebox-bc: var(--pkt-color-border-beige);
   --pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-beige);
   --pkt-color-messagebox-txt: var(--pkt-color-text-body-dark);
 }
 
-.#{$-module-name}--red {
+.pkt-messagebox--red {
   --pkt-color-messagebox-bc: var(--pkt-color-border-red);
   --pkt-color-messagebox-bg: var(--pkt-color-surface-default-faded-red);
 }
 
-.#{$-module-name}--green {
+.pkt-messagebox--green {
   --pkt-color-messagebox-bc: var(--pkt-color-border-green);
   --pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-green);
 }
 
-.#{$-module-name}--blue {
+.pkt-messagebox--blue {
   --pkt-color-messagebox-bc: var(--pkt-color-border-blue);
   --pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-blue);
 }
 
-.#{$-module-name} {
+.pkt-messagebox {
   padding: $-messagebox-spacing $-messagebox-spacing $-messagebox-spacing
     calc($-messagebox-spacing - $-border-thickness);
 
@@ -49,7 +47,7 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
   overflow-wrap: break-word;
   overflow: hidden;
 
-  &:not(:has(.#{$-module-name}__title)):has(.#{$-module-name}__close) {
+  &:not(:has(.pkt-messagebox__title)):has(.pkt-messagebox__close) {
     grid-template: 'text close';
     grid-template-columns: minmax(0, 1fr) 40px;
   }
@@ -69,10 +67,11 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
     margin: 0;
     @include get-text('pkt-txt-18-light');
 
-    p {
+    p,
+    ul {
       margin-block-end: map.get(variables.$spacing, 'size-16');
 
-      &:last-of-type {
+      &:last-child {
         margin-block-end: 0;
       }
     }
@@ -88,18 +87,19 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
 }
 
 // Compact variant
-.#{$-module-name}--compact {
-  padding: $-messagebox-spacing-compact $-messagebox-spacing-compact $-messagebox-spacing-compact
-    calc($-messagebox-spacing-compact - $-border-thickness);
-  .#{$-module-name}__title {
+.pkt-messagebox--compact {
+  padding: $-messagebox-spacing-compact $-messagebox-spacing $-messagebox-spacing-compact
+    calc($-messagebox-spacing - $-border-thickness);
+  .pkt-messagebox__title {
     @include get-text('pkt-txt-16-medium');
+    margin-block-end: $-messagebox-spacing-compact;
   }
 
-  .#{$-module-name}__text {
+  .pkt-messagebox__text {
     @include get-text('pkt-txt-16-light');
   }
 
-  .#{$-module-name}__close > .pkt-btn {
+  .pkt-messagebox__close > .pkt-btn {
     top: -15px;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "17.1.0",
+  "version": "17.1.1",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -62,5 +62,5 @@
   "dependencies": {
     "astro": "^7.2.0"
   },
-  "gitHead": "20e21ac32f77c4b3981dcabfcace7cd0565c2f7a"
+  "gitHead": "0e600db899cfda4ac87979c94724908424ba56c8"
 }