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

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

@@ -65,7 +65,9 @@ $font-size: (
   'size-30': 1.875rem,
   'size-36': 2.25rem,
   'size-40': 2.5rem,
+  'size-48': 3rem,
   'size-54': 3.375rem,
+  'size-70': 4.375rem,
 ) !default;
 
 $font-weight: (
@@ -115,12 +117,24 @@ $pkt-font-weight: (
 
 // pkt specific styles
 $pkt-styles: (
+  'pkt-txt-70': (
+    'size': 'size-70',
+    'weight': 'regular',
+    'letter-spacing': 'tighter',
+    'line-height': 'lh-82',
+  ),
   'pkt-txt-54': (
     'size': 'size-54',
     'weight': 'regular',
     'letter-spacing': 'tighter',
     'line-height': 'lh-82',
   ),
+  'pkt-txt-48': (
+    'size': 'size-48',
+    'weight': 'regular',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-54',
+  ),
   'pkt-txt-40': (
     'size': 'size-40',
     'weight': 'regular',

package/dist/scss/components/_heading.scss

@@ -0,0 +1,48 @@
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/typography';
+@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/functions';
+
+.pkt-heading {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.2;
+
+  &--xlarge {
+    @include typography.get-text('pkt-txt-70');
+  }
+
+  &--large {
+    @include typography.get-text('pkt-txt-48');
+  }
+
+  &--medium {
+    @include typography.get-text('pkt-txt-30');
+  }
+
+  &--small {
+    @include typography.get-text('pkt-txt-24');
+  }
+
+  &--xsmall {
+    @include typography.get-text('pkt-txt-22');
+  }
+
+  &--noSpacing {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+
+  &--start {
+    text-align: start;
+  }
+
+  &--end {
+    text-align: end;
+  }
+
+  &--center {
+    text-align: center;
+  }
+}

package/dist/scss/components/_index.scss

@@ -8,6 +8,7 @@
 @forward 'combobox';
 @forward 'footer';
 @forward 'header';
+@forward 'heading';
 @forward 'icon';
 @forward 'inputwrapper';
 @forward 'linkcard';

package/dist/scss/components/_inputwrapper.scss

@@ -15,13 +15,16 @@ pkt-input-wrapper {
     gap: map.get(variables.$spacing, 'size-8');
     color: var(--pkt-color-text-body-default);
 
-    @include typography.get-text('pkt-txt-18-medium');
-
     &:empty {
       display: none;
     }
   }
 
+  &__label,
+  &__legend {
+    @include typography.get-text('pkt-txt-18-medium');
+  }
+
   &__helptext-container {
     display: flex;
     flex-direction: column;

package/dist/scss/components/_tag.scss

@@ -44,6 +44,12 @@ pkt-tag > .pkt-tag {
   @include typography.get-text-style('pkt-txt-14-medium');
   line-height: 1.875rem;
 
+  p {
+    margin: 0;
+    padding: 0;
+    line-height: inherit;
+  }
+
   &.pkt-btn:hover,
   &.pkt-tag--hover {
     background-color: var(--pkt-color-surface-strong-blue);

package/dist/scss/pkt-docs.scss

@@ -0,0 +1,113 @@
+@charset "utf-8";
+
+// Normalise
+@forward 'normalise';
+
+// Base
+@forward 'base';
+
+// HTML elements
+@forward 'elements';
+
+// Components
+@forward 'components';
+
+.punkt-white-bg {
+  background-color: var(--pkt-color-surface-subtle-white);
+}
+.punkt-green-bg {
+  background-color: var(--pkt-color-brand-light-green-400);
+}
+
+.punkt-frontpage {
+  background-color: var(--bg-color, var(--pkt-color-brand-blue-200));
+  min-height: 100vh;
+}
+
+.punkt-header {
+  top: 0;
+  left: 0;
+  right: 0;
+  position: absolute;
+  padding: 2rem;
+}
+.punkt-header,
+.punkt-header > nav,
+.punkt-header__links {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 3rem;
+}
+
+.punkt-header__links {
+  list-style: none;
+  padding: 0;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  column-gap: 1.5rem;
+  row-gap: 0.5rem;
+  a {
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    color: var(--pkt-color-brand-dark-blue-1000);
+  }
+}
+
+.punkt-header__search {
+  max-width: 10rem;
+}
+
+.punkt-hero--centered {
+  padding: 14rem 8rem 10rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: var(--bg-color, var(--pkt-color-brand-blue-500));
+  margin-bottom: -5rem;
+  .punkt-hero__text {
+    text-align: center;
+    padding-top: 2rem;
+    max-width: 45rem;
+  }
+}
+
+.punkt-frontpage-links,
+.punkt-article-grid {
+  ul {
+    padding: 0;
+    list-style: none;
+  }
+  .pkt-linkcard {
+    background-color: white;
+    padding: 2.5rem;
+  }
+  .pkt-card {
+    padding: 0;
+  }
+}
+
+.punkt-promo {
+  display: flex;
+  padding: 4rem;
+  margin: 6rem 0;
+  gap: 4rem;
+  align-items: center;
+  background-color: var(--pkt-color-brand-yellow-500);
+  .punkt-promo-text {
+    flex: 1 1 auto;
+  }
+  .punkt-promo-icon {
+    flex: 0 1 13rem;
+    aspect-ratio: 1/1;
+  }
+}
+
+.punkt-info-box {
+  display: flex;
+  > div {
+    flex: 1 1 50%;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "12.34.2",
+  "version": "12.35.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -19,8 +19,11 @@
     "dev": "astro dev",
     "preview": "astro preview"
   },
+  "dependencies": {
+    "astro": "^5.7.5"
+  },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^12.30.1",
+    "@oslokommune/punkt-assets": "^12.34.4",
     "edit-json-file": "^1.8.0",
     "fs-extra": "^11.2.0",
     "prettier": "^3.3.3",
@@ -32,7 +35,7 @@
     "@oslokommune/punkt-assets": ">=3.1.0"
   },
   "engines": {
-    "node": ">=18.19.0"
+    "node": ">=20.19.1"
   },
   "private": false,
   "publishConfig": {
@@ -54,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "780c78ea4619450ddd43ba97183c2eb239a53524"
+  "gitHead": "897a80f0520cca735bc514c074d11a7e750079cc"
 }