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

package/dist/scss/abstracts/variables/_typography.scss

@@ -4,46 +4,52 @@ $font-path: '..' !default;
 $font-family: (
   'normal': "'Oslo Sans', arial, sans-serif",
   'icon': "'Oslo Icons', sans-serif",
-  ) !default;
+) !default;
 
 $font-face: (
-  'regular': ('family': Oslo Sans,
+  'regular': (
+    'family': Oslo Sans,
     'style': normal,
     'weight': 400,
     'src-woff': '#{$font-path}/fonts/OsloSans-Regular.woff',
     'src-woff2': '#{$font-path}/fonts/OsloSans-Regular.woff2',
   ),
-  'regular-italic': ('family': Oslo Sans,
+  'regular-italic': (
+    'family': Oslo Sans,
     'style': italic,
     'weight': 400,
     'src-woff': '#{$font-path}/fonts/OsloSans-RegularItalic.woff',
     'src-woff2': '#{$font-path}/fonts/OsloSans-RegularItalic.woff2',
   ),
-  'light': ('family': Oslo Sans,
+  'light': (
+    'family': Oslo Sans,
     'style': normal,
     'weight': 300,
     'src-woff': '#{$font-path}/fonts/OsloSans-Light.woff',
     'src-woff2': '#{$font-path}/fonts/OsloSans-Light.woff2',
   ),
-  'medium': ('family': Oslo Sans,
+  'medium': (
+    'family': Oslo Sans,
     'style': normal,
     'weight': 500,
     'src-woff': '#{$font-path}/fonts/OsloSans-Medium.woff',
     'src-woff2': '#{$font-path}/fonts/OsloSans-Medium.woff2',
   ),
-  'bold': ('family': Oslo Sans,
+  'bold': (
+    'family': Oslo Sans,
     'style': normal,
     'weight': 700,
     'src-woff': '#{$font-path}/fonts/OsloSans-Bold.woff',
     'src-woff2': '#{$font-path}/fonts/OsloSans-Bold.woff2',
   ),
-  'icons': ('family': Oslo Icons,
+  'icons': (
+    'family': Oslo Icons,
     'style': normal,
     'weight': 400,
     'src-woff': '#{$font-path}/fonts/OsloIcons.woff',
     'src-woff2': '#{$font-path}/fonts/OsloIcons.woff2',
   ),
-  ) !default;
+) !default;
 
 $font-size-base: 16px;
 $font-size: (
@@ -60,14 +66,14 @@ $font-size: (
   'size-36': 2.25rem,
   'size-40': 2.5rem,
   'size-54': 3.375rem,
-  ) !default;
+) !default;
 
 $font-weight: (
   'light': 300,
   'regular': 400,
   'medium': 500,
   'bold': 700,
-  ) !default;
+) !default;
 
 $line-height: (
   'body': 1.5rem,
@@ -84,283 +90,339 @@ $line-height: (
   'lh-24': 1.5rem,
   'lh-22': 1.375rem,
   'lh-20': 1.25rem,
-  ) !default;
+) !default;
 
 $letter-spacing: (
   'tighter': -0.4px,
   'tight': -0.2px,
   'normal': normal,
-  ) !default;
+) !default;
 
 $pkt-font-weight: (
-  'pkt-font-light': ('weight': 'light',
+  'pkt-font-light': (
+    'weight': 'light',
   ),
-  'pkt-font-regular': ('weight': 'regular',
+  'pkt-font-regular': (
+    'weight': 'regular',
   ),
-  'pkt-font-medium': ('weight': 'medium',
+  'pkt-font-medium': (
+    'weight': 'medium',
   ),
-  'pkt-font-bold': ('weight': 'bold',
+  'pkt-font-bold': (
+    'weight': 'bold',
   ),
 );
 
 // pkt specific styles
 $pkt-styles: (
-  'pkt-txt-54': ('size': 'size-54',
+  'pkt-txt-54': (
+    'size': 'size-54',
     'weight': 'regular',
     'letter-spacing': 'tighter',
     'line-height': 'lh-82',
   ),
-  'pkt-txt-40': ('size': 'size-40',
+  'pkt-txt-40': (
+    'size': 'size-40',
     'weight': 'regular',
     'letter-spacing': 'tight',
     'line-height': 'lh-60',
   ),
-  'pkt-txt-36': ('size': 'size-36',
+  'pkt-txt-36': (
+    'size': 'size-36',
     'weight': 'regular',
     'letter-spacing': 'tight',
     'line-height': 'lh-54',
   ),
-  'pkt-txt-30': ('size': 'size-30',
+  'pkt-txt-30': (
+    'size': 'size-30',
     'weight': 'regular',
     'letter-spacing': 'tight',
     'line-height': 'lh-44',
   ),
-  'pkt-txt-28': ('size': 'size-28',
+  'pkt-txt-28': (
+    'size': 'size-28',
     'weight': 'regular',
     'letter-spacing': 'tight',
     'line-height': 'lh-42',
   ),
-  'pkt-txt-26': ('size': 'size-26',
+  'pkt-txt-26': (
+    'size': 'size-26',
     'weight': 'regular',
     'letter-spacing': 'tight',
     'line-height': 'lh-40',
   ),
-  'pkt-txt-24': ('size': 'size-24',
+  'pkt-txt-24': (
+    'size': 'size-24',
     'weight': 'regular',
     'letter-spacing': 'tight',
     'line-height': 'lh-36',
   ),
-  'pkt-txt-22': ('size': 'size-22',
+  'pkt-txt-22': (
+    'size': 'size-22',
     'weight': 'regular',
     'letter-spacing': 'tight',
     'line-height': 'lh-34',
   ),
-  'pkt-txt-20': ('size': 'size-20',
+  'pkt-txt-20': (
+    'size': 'size-20',
     'weight': 'regular',
     'letter-spacing': 'tight',
     'line-height': 'lh-32',
   ),
-  'pkt-txt-18': ('size': 'size-18',
+  'pkt-txt-18': (
+    'size': 'size-18',
     'weight': 'regular',
     'letter-spacing': 'tight',
     'line-height': 'lh-28',
   ),
-  'pkt-txt-16': ('size': 'size-16',
+  'pkt-txt-16': (
+    'size': 'size-16',
     'weight': 'regular',
     'letter-spacing': 'tight',
     'line-height': 'lh-24',
   ),
-  'pkt-txt-14': ('size': 'size-14',
+  'pkt-txt-14': (
+    'size': 'size-14',
     'weight': 'regular',
     'letter-spacing': 'tight',
     'line-height': 'lh-22',
   ),
-  'pkt-txt-12': ('size': 'size-12',
+  'pkt-txt-12': (
+    'size': 'size-12',
     'weight': 'regular',
     'letter-spacing': 'tight',
     'line-height': 'lh-20',
   ),
-  'pkt-txt-54-medium': ('size': 'size-54',
+  'pkt-txt-54-medium': (
+    'size': 'size-54',
     'weight': 'medium',
     'letter-spacing': 'tighter',
     'line-height': 'lh-82',
   ),
-  'pkt-txt-40-medium': ('size': 'size-40',
+  'pkt-txt-40-medium': (
+    'size': 'size-40',
     'weight': 'medium',
     'letter-spacing': 'tight',
     'line-height': 'lh-60',
   ),
-  'pkt-txt-36-medium': ('size': 'size-36',
+  'pkt-txt-36-medium': (
+    'size': 'size-36',
     'weight': 'medium',
     'letter-spacing': 'tight',
     'line-height': 'lh-54',
   ),
-  'pkt-txt-30-medium': ('size': 'size-30',
+  'pkt-txt-30-medium': (
+    'size': 'size-30',
     'weight': 'medium',
     'letter-spacing': 'tight',
     'line-height': 'lh-44',
   ),
-  'pkt-txt-28-medium': ('size': 'size-28',
+  'pkt-txt-28-medium': (
+    'size': 'size-28',
     'weight': 'medium',
     'letter-spacing': 'tight',
     'line-height': 'lh-42',
   ),
-  'pkt-txt-26-medium': ('size': 'size-26',
+  'pkt-txt-26-medium': (
+    'size': 'size-26',
     'weight': 'medium',
     'letter-spacing': 'tight',
     'line-height': 'lh-40',
   ),
-  'pkt-txt-24-medium': ('size': 'size-24',
+  'pkt-txt-24-medium': (
+    'size': 'size-24',
     'weight': 'medium',
     'letter-spacing': 'tight',
     'line-height': 'lh-36',
   ),
-  'pkt-txt-22-medium': ('size': 'size-22',
+  'pkt-txt-22-medium': (
+    'size': 'size-22',
     'weight': 'medium',
     'letter-spacing': 'tight',
     'line-height': 'lh-34',
   ),
-  'pkt-txt-20-medium': ('size': 'size-20',
+  'pkt-txt-20-medium': (
+    'size': 'size-20',
     'weight': 'medium',
     'letter-spacing': 'tight',
     'line-height': 'lh-32',
   ),
-  'pkt-txt-18-medium': ('size': 'size-18',
+  'pkt-txt-18-medium': (
+    'size': 'size-18',
     'weight': 'medium',
     'letter-spacing': 'tight',
     'line-height': 'lh-28',
   ),
-  'pkt-txt-16-medium': ('size': 'size-16',
+  'pkt-txt-16-medium': (
+    'size': 'size-16',
     'weight': 'medium',
     'letter-spacing': 'tight',
     'line-height': 'lh-24',
   ),
-  'pkt-txt-14-medium': ('size': 'size-14',
+  'pkt-txt-14-medium': (
+    'size': 'size-14',
     'weight': 'medium',
     'letter-spacing': 'tight',
     'line-height': 'lh-22',
   ),
-  'pkt-txt-12-medium': ('size': 'size-12',
+  'pkt-txt-12-medium': (
+    'size': 'size-12',
     'weight': 'medium',
     'letter-spacing': 'tight',
     'line-height': 'lh-20',
   ),
-  'pkt-txt-54-bold': ('size': 'size-54',
+  'pkt-txt-54-bold': (
+    'size': 'size-54',
     'weight': 'bold',
     'letter-spacing': 'tighter',
     'line-height': 'lh-82',
   ),
-  'pkt-txt-40-bold': ('size': 'size-40',
+  'pkt-txt-40-bold': (
+    'size': 'size-40',
     'weight': 'bold',
     'letter-spacing': 'tight',
     'line-height': 'lh-60',
   ),
-  'pkt-txt-36-bold': ('size': 'size-36',
+  'pkt-txt-36-bold': (
+    'size': 'size-36',
     'weight': 'bold',
     'letter-spacing': 'tight',
     'line-height': 'lh-54',
   ),
-  'pkt-txt-30-bold': ('size': 'size-30',
+  'pkt-txt-30-bold': (
+    'size': 'size-30',
     'weight': 'bold',
     'letter-spacing': 'tight',
     'line-height': 'lh-44',
   ),
-  'pkt-txt-28-bold': ('size': 'size-28',
+  'pkt-txt-28-bold': (
+    'size': 'size-28',
     'weight': 'bold',
     'letter-spacing': 'tight',
     'line-height': 'lh-42',
   ),
-  'pkt-txt-26-bold': ('size': 'size-26',
+  'pkt-txt-26-bold': (
+    'size': 'size-26',
     'weight': 'bold',
     'letter-spacing': 'tight',
     'line-height': 'lh-40',
   ),
-  'pkt-txt-24-bold': ('size': 'size-24',
+  'pkt-txt-24-bold': (
+    'size': 'size-24',
     'weight': 'bold',
     'letter-spacing': 'tight',
     'line-height': 'lh-36',
   ),
-  'pkt-txt-22-bold': ('size': 'size-22',
+  'pkt-txt-22-bold': (
+    'size': 'size-22',
     'weight': 'bold',
     'letter-spacing': 'tight',
     'line-height': 'lh-34',
   ),
-  'pkt-txt-20-bold': ('size': 'size-20',
+  'pkt-txt-20-bold': (
+    'size': 'size-20',
     'weight': 'bold',
     'letter-spacing': 'tight',
     'line-height': 'lh-32',
   ),
-  'pkt-txt-18-bold': ('size': 'size-18',
+  'pkt-txt-18-bold': (
+    'size': 'size-18',
     'weight': 'bold',
     'letter-spacing': 'tight',
     'line-height': 'lh-28',
   ),
-  'pkt-txt-16-bold': ('size': 'size-16',
+  'pkt-txt-16-bold': (
+    'size': 'size-16',
     'weight': 'bold',
     'letter-spacing': 'tight',
     'line-height': 'lh-24',
   ),
-  'pkt-txt-14-bold': ('size': 'size-14',
+  'pkt-txt-14-bold': (
+    'size': 'size-14',
     'weight': 'bold',
     'letter-spacing': 'tight',
     'line-height': 'lh-22',
   ),
-  'pkt-txt-12-bold': ('size': 'size-12',
+  'pkt-txt-12-bold': (
+    'size': 'size-12',
     'weight': 'bold',
     'letter-spacing': 'tight',
     'line-height': 'lh-20',
   ),
-  'pkt-txt-54-light': ('size': 'size-54',
+  'pkt-txt-54-light': (
+    'size': 'size-54',
     'weight': 'light',
     'letter-spacing': 'tighter',
     'line-height': 'lh-82',
   ),
-  'pkt-txt-40-light': ('size': 'size-40',
+  'pkt-txt-40-light': (
+    'size': 'size-40',
     'weight': 'light',
     'letter-spacing': 'tight',
     'line-height': 'lh-60',
   ),
-  'pkt-txt-36-light': ('size': 'size-36',
+  'pkt-txt-36-light': (
+    'size': 'size-36',
     'weight': 'light',
     'letter-spacing': 'tight',
     'line-height': 'lh-54',
   ),
-  'pkt-txt-30-light': ('size': 'size-30',
+  'pkt-txt-30-light': (
+    'size': 'size-30',
     'weight': 'light',
     'letter-spacing': 'tight',
     'line-height': 'lh-44',
   ),
-  'pkt-txt-28-light': ('size': 'size-28',
+  'pkt-txt-28-light': (
+    'size': 'size-28',
     'weight': 'light',
     'letter-spacing': 'tight',
     'line-height': 'lh-42',
   ),
-  'pkt-txt-26-light': ('size': 'size-26',
+  'pkt-txt-26-light': (
+    'size': 'size-26',
     'weight': 'light',
     'letter-spacing': 'tight',
     'line-height': 'lh-40',
   ),
-  'pkt-txt-24-light': ('size': 'size-24',
+  'pkt-txt-24-light': (
+    'size': 'size-24',
     'weight': 'light',
     'letter-spacing': 'tight',
     'line-height': 'lh-36',
   ),
-  'pkt-txt-22-light': ('size': 'size-22',
+  'pkt-txt-22-light': (
+    'size': 'size-22',
     'weight': 'light',
     'letter-spacing': 'tight',
     'line-height': 'lh-34',
   ),
-  'pkt-txt-20-light': ('size': 'size-20',
+  'pkt-txt-20-light': (
+    'size': 'size-20',
     'weight': 'light',
     'letter-spacing': 'tight',
     'line-height': 'lh-32',
   ),
-  'pkt-txt-18-light': ('size': 'size-18',
+  'pkt-txt-18-light': (
+    'size': 'size-18',
     'weight': 'light',
     'letter-spacing': 'tight',
     'line-height': 'lh-28',
   ),
-  'pkt-txt-16-light': ('size': 'size-16',
+  'pkt-txt-16-light': (
+    'size': 'size-16',
     'weight': 'light',
     'letter-spacing': 'tight',
     'line-height': 'lh-24',
   ),
-  'pkt-txt-14-light': ('size': 'size-14',
+  'pkt-txt-14-light': (
+    'size': 'size-14',
     'weight': 'light',
     'letter-spacing': 'tight',
     'line-height': 'lh-22',
   ),
-  'pkt-txt-12-light': ('size': 'size-12',
+  'pkt-txt-12-light': (
+    'size': 'size-12',
     'weight': 'light',
     'letter-spacing': 'tight',
     'line-height': 'lh-20',

package/dist/scss/components/_modal.scss

@@ -74,6 +74,10 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
 
     .pkt-modal__closeButton--yellow-filled {
       .pkt-btn {
+        height: 4rem;
+        width: 4rem;
+        justify-content: center;
+        align-items: center;
         border: none;
         border-radius: 50%;
         color: var(--pkt-color-surface-strong-dark-blue);
@@ -87,6 +91,10 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
             color: var(--pkt-color-background-default);
           }
         }
+        .pkt-link__icon {
+          width: unset;
+          height: 1.75rem;
+        }
       }
     }
 
@@ -226,12 +234,6 @@ body.pkt-modal--open {
   }
 }
 
-// Make sure the header has a background color if the close button is not yellow
-// :has() is not supported in Safari thus we must set :is so that it is ignored in Safari and not crash at least.
-.pkt-modal__header:is(:has(.pkt-modal__closeButton:not(.pkt-modal__closeButton--yellow-filled))) {
-  background-color: var(--pkt-color-background-default);
-}
-
 // In Modal docs, margin is being added on buttons because of some global style, thus we need to override it here so that our docs example is consistent with the component.
 .pkt-modal
   .pkt-modal__container

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "12.22.0",
+  "version": "12.23.1",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -20,7 +20,7 @@
     "preview": "astro preview"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^12.21.6",
+    "@oslokommune/punkt-assets": "^12.23.0",
     "edit-json-file": "^1.8.0",
     "fs-extra": "^11.2.0",
     "prettier": "^3.3.3",
@@ -54,5 +54,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "33ada1308d3f9b91fe54079e2f43e1370aed6a98"
+  "gitHead": "c546f78a17e9319e711ea21d9ecdf8cd83dc156d"
 }