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

package/dist/scss/abstracts/variables/_spacing.scss

@@ -16,17 +16,18 @@ $spacing: (
   'size-72': 4.5rem,
   'size-80': 5rem,
   'size-88': 5.5rem,
+  'size-96': 6rem,
   'size-104': 6.5rem,
   'size-128': 8rem,
-  'size-148': 9.25rem,
-  /* deprecated */
-  'size-5': 0.3125rem,
+  // Skulle være deprecated men er uheldigvis i heavy bruk:
   'size-10': 0.625rem,
-  'size-15': 0.9375rem,
   'size-20': 1.25rem,
   'size-30': 1.875rem,
-  'size-50': 3.125rem,
   'size-60': 3.75rem,
+  // Deprecated — fjernes i neste major:
+  'size-5': 0.3125rem,
+  'size-15': 0.9375rem,
+  'size-50': 3.125rem,
   'size-75': 4.6875rem,
   'size-100': 6.25rem,
-  ) !default;
+) !default;

package/dist/scss/base/_grid-responsive.scss

@@ -0,0 +1,37 @@
+/*
+ * Responsiv grid
+ */
+
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+
+.pkt-grid {
+  @each $bp-name, $bp-value in variables.$breakpoints {
+    @include bp-up($bp-value) {
+      @each $sp-name, $sp-value in variables.$spacing {
+        &--gap-#{$sp-name}-#{$bp-name}-up {
+          gap: $sp-value;
+        }
+        &--colgap-#{$sp-name}-#{$bp-name}-up {
+          column-gap: $sp-value;
+        }
+        &--rowgap-#{$sp-name}-#{$bp-name}-up {
+          row-gap: $sp-value;
+        }
+      }
+    }
+  }
+
+  & > .pkt-cell,
+  & > * > .pkt-cell {
+    @each $bp-name, $bp-value in variables.$breakpoints {
+      @include bp-up($bp-value) {
+        @for $i from 2 through 12 {
+          &.pkt-cell--span#{$i}-#{$bp-name}-up {
+            grid-column-end: span $i;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/scss/base/_grid.scss

@@ -1,5 +1,5 @@
 /*
- * CSS Grid layouts
+ * CSS Grid
  */
 @use 'sass:map';
 @use 'sass:math';
@@ -83,22 +83,6 @@ $gapsMedium: map.get(variables.$spacing, 'size-32');
     }
   }
 
-  @each $bp-name, $bp-value in variables.$breakpoints {
-    @include bp-up($bp-value) {
-      @each $sp-name, $sp-value in variables.$spacing {
-        &--gap-#{$sp-name}-#{$bp-name}-up {
-          gap: $sp-value;
-        }
-        &--colgap-#{$sp-name}-#{$bp-name}-up {
-          column-gap: $sp-value;
-        }
-        &--rowgap-#{$sp-name}-#{$bp-name}-up {
-          row-gap: $sp-value;
-        }
-      }
-    }
-  }
-
   // grid cell
   & > .pkt-cell,
   & > * > .pkt-cell {
@@ -129,15 +113,5 @@ $gapsMedium: map.get(variables.$spacing, 'size-32');
         grid-column-end: span $i;
       }
     }
-
-    @each $bp-name, $bp-value in variables.$breakpoints {
-      @include bp-up($bp-value) {
-        @for $i from 2 through 12 {
-          &.pkt-cell--span#{$i}-#{$bp-name}-up {
-            grid-column-end: span $i;
-          }
-        }
-      }
-    }
   }
 }

package/dist/scss/base/_index.scss

@@ -9,10 +9,12 @@
 
 @forward 'containers';
 @forward 'grid';
+@forward 'grid-responsive';
 @forward 'layouts';
 
 @forward 'colors-utilities';
 @forward 'spacing';
+@forward 'spacing-responsive';
 @forward 'visibility';
 
 @forward 'accessibility';

package/dist/scss/base/_spacing-responsive.scss

@@ -0,0 +1,13 @@
+/*
+ * Responsiv spacing
+ */
+
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+@use 'spacing' as *;
+
+@each $bp-name, $bp-value in variables.$breakpoints {
+  @include bp-up($bp-value) {
+    @include spacing-utilities('--#{$bp-name}-up');
+  }
+}

package/dist/scss/base/_spacing.scss

@@ -59,8 +59,3 @@
 }
 
 @include spacing-utilities();
-@each $bp-name, $bp-value in variables.$breakpoints {
-  @include bp-up($bp-value) {
-    @include spacing-utilities('--#{$bp-name}-up');
-  }
-}

package/dist/scss/components/_header-menu.scss

@@ -61,7 +61,7 @@ $pkt-header-menu-breakpoint: 48rem;
     padding: 0;
     display: grid;
     grid-template-columns: 1fr;
-    gap: map.get(variables.$spacing, 'size-20');
+    gap: map.get(variables.$spacing, 'size-24');
 
     @include cq('pkt-header-menu', $cq-bp-tablet) {
       grid-template-columns: repeat(4, 1fr);

package/dist/scss/elements/_input.scss

@@ -110,9 +110,8 @@ pkt-select {
     }
   }
 
-  // Med rows-attributt styrer rows høyden alene
   &:is(textarea:not([rows])) {
-    min-height: map.get(variables.$spacing, 'size-148');
+    min-height: 9.25rem; // 148px
   }
 
   &:is(select) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "17.1.2",
+  "version": "18.0.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -25,7 +25,7 @@
     ]
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^17.1.2",
+    "@oslokommune/punkt-assets": "^18.0.0",
     "edit-json-file": "^1.8.1",
     "fs-extra": "^11.3.5",
     "prettier": "^3.8.4",
@@ -62,5 +62,5 @@
   "dependencies": {
     "astro": "^7.2.0"
   },
-  "gitHead": "51f7f8d53f738720e275a3d9492b26f7ff16b88a"
+  "gitHead": "057d0045ccd1af4d0f6591f0e2b0e5ab6fda3843"
 }